shape-image-threshold | CSS-Tricks

The CSS shape-image-threshold property sets which pixels are included in the shape of an image when shape-outside is used to define the float area of a CSS element.

Let’s say we’re using a linear gradient to define the float area of a CSS shape. Something like this where we go from a solid color to transparent at a 45° angle:

Normally, we’d define that as the background-image of an element. If we float this element and drop some content next to it, the gradient and content would sit side-by-side.

But if we swap background-image for shape-outside, we’ll no longer see the gradient, but the content wraps around it where the pixels in the gradient are transparent.

But let’s say we think the text needs to hug the shape a little closer. That’s where we can reach for shape-image-threshold. We can use it to adjust where the content naturally wraps around the transparent pixels by including pixels that are semi-transparent. For example, a shape-image-threshold value of .3 will include pixels that are more than 30% opaque in the float area of the shape.

This time, we’ll include the gradient to see just how this works.

See that? By declaring shape-image-threshold on the second shape and setting it to a value of .15, we’ve included pixels that are greater than 15% opaque in the float area, allowing the content to overlap the shape a smidge.

This also works when we’re defining the outside shape with an actual image file that uses transparency. Same deal, just a different shape to work with.

Syntax

.logo {
  shape-outside: url(/path/to/image.png);
  shape-image-threshold: .6;
}

Applies to: floats
Inherited: no
Initial value: 0.0
Animation type: number

Values

The shape-image-threshold property accepts a single alpha value between 0 and 1, where 0 is the equivalent of an opacity level of 0% (fully transparent) and 1 is the equivalent of an opacity level of 100% (no transparency). The initial value is 0.0.