The shape-image-threshold
CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. For example, a value of 0.5
means that the shape will enclose all the pixels that are more than 50% opaque.
/* <number> value */ shape-image-threshold: 0.7; /* Global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset;
Syntax
Values
<alpha-value>
- Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. Values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range.
Formal definition
Initial value | 0.0 |
---|---|
Applies to | floats |
Inherited | no |
Computed value | The same as the specified value after clipping the <number> to the range [0.0, 1.0]. |
Animation type | a number |
Formal syntax
<alpha-value>where
<alpha-value> = <number> | <percentage>
Examples
Aligning text to a gradient
This example creates a <div>
block with a gradient background image. The gradient is established as a CSS shape using shape-outside
, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.
HTML
<div id="gradient-shape"></div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, libero quae nihil porro debitis laboriosam inventore animi impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni expedita? </p>
CSS
#gradient-shape { width: 150px; height: 150px; float: left; background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; }
The shape is established here using background-image
with a linear gradient rather than an image file. The same gradient is also used as the image from which the shape is derived for establishing the float area, using the shape-outside
property.
The 20% opacity threshold for treating gradient pixels as part of the shape is then established using shape-image-threshold
with a value of 0.2
.
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Shapes Module Level 1 The definition of 'shape-image-threshold' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
shape-image-threshold | Chrome Full support 37 | Edge Full support 79 | Firefox
Full support
62
| IE No support No | Opera Full support 24 | Safari Full support 10.1 | WebView Android Full support 37 | Chrome Android Full support 37 | Firefox Android
Full support
62
| Opera Android Full support 24 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 3.0 |
Support for percentage opacity values | Chrome Full support 78 | Edge Full support 79 | Firefox Full support 70 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 78 | Chrome Android Full support 78 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.