Shapes & Masks
shape-image-threshold
Setting the alpha channel threshold for a CSS shape.
Overview
| Class | Declarations |
|---|---|
shape-image-threshold:<value> | shape-image-threshold: <value>;
|
Examples
Set the alpha threshold
Use shape-image-threshold:* with image-based shapes to decide which pixels participate in the shape.
<img class="float:left shape-image-threshold:.5 shape-outside:url(/mask.png)" src="/images/photo.jpg" alt="Photo">Generated CSS
@layer utilities { .shape-image-threshold\:\.5 { shape-image-threshold: 0.5 }}Use lower thresholds for soft masks
Lower thresholds include more semi-transparent pixels in the text wrap shape.
<img class="shape-image-threshold:.2" src="/images/photo.jpg" alt="">Use with image shapes
This property only matters for shapes that use an image source, such as shape-outside:url(*) or gradient-based shapes.
<img class="float:left shape-image-threshold:.5 shape-outside:url(/mask.png)" src="/images/photo.jpg" alt="">Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<img class="shape-image-threshold:.5:hover shape-image-threshold:0@print shape-image-threshold:.2@sm" src="/images/photo.jpg" alt="">