shape-image-threshold

Overview

The shape-image-threshold property sets a specific opacity threshold to extract a shape when an image is used with the shape-outside property. The boundary of the shape is determined by the pixels whose alpha value exceeds this threshold.

Examples and Usage

In the following example, we'll illustrate how to use the shape-image-threshold property to affect the text flow around a gradient-based shape.

HTML Structure

<div class= "gradient-example"></div>
<p>
  Front-end developers must also have a good understanding of user experience (UX) design principles, and be able to create user interfaces that are both visually appealing and functional. This involves working closely with UX designers to understand the requirements of a project, and using a variety of tools and techniques to create wireframes, prototypes, and high-fidelity mockups that can be used to test and iterate on the design of a web application.
</p>

CSS Styling

.gradient-example {
  width: 120px;    /* Defines the block width */
  height: 120px;   /* Defines the block height */
  float: left;     /* Allows the block to float to the left side */
  background-image: linear-gradient(40deg, #CD3333, transparent 70%, transparent);  /* Defines a linear gradient as background */
  shape-outside: linear-gradient(40deg, #CD3333, transparent 90%, transparent);     /* Sets the same linear gradient as the float area shape */
  shape-image-threshold: 0.4;   /* Sets an opacity threshold for the shape extraction */
}

Our CSS creates a <div> block with a linear gradient, which also forms the shape of the float area through the shape-outside property. The shape-image-threshold establishes an opacity threshold of 0.4, thus only pixels with an opacity of 40% or more are included in the shape, causing the surrounding text to flow differently. Instead of a linear gradient, you can also use an image with an alpha channel, specified via the url() function, such as shape-outside: url();.

Values

The shape-image-threshold property accepts the following values:

Associated Properties

• shape-outside
• shape-margin
• clip-path

Tips and Tricks

• In future updates of CSS Shapes, there might be an option to use an image's luminance data instead of its alpha data for defining shapes. If this happens, shape-image-threshold will adapt to apply its threshold to either alpha or luminance.

• Experiment with different shape-image-threshold values for creating interesting effects. A higher threshold might result in shapes that appear more defined due to their higher opacity, while a lower threshold could result in more fluid and less pronounced shapes.

• The shape-outside and shape-image-threshold properties give you the ability to guide the content flow and can be handy when dealing with complex design elements or when trying to achieve a unique text wrap around an image or a design element.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Support for Percentage Opacity Values

For a more detailed breakdown, refer to the first link in the Useful Resources below.

Useful Resources

Can I use: shape-image-threshold

W3C's Editor's Draft of CSS Shapes Module Level 1: shape-image-threshold