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:
![](png/gradient-to-transparent41fc.png)
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.
Browser support
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
No | 79+ | 62+ | 37+ | 10.1+ | 24+ |
Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
---|---|---|---|---|
84+ | 68+ | 81+ | 10.3+ | All |
More information
- CSS Shapes Module Level 1 Specification (Editor’s Draft)
- MDN Documentation