CSS shape-image-threshold Property

Description

The shape-image-threshold CSS property defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.

Initial value
0
Applies to
Floats
Inherited
No
Media
Visual
Computed value
specified number, clamped to the range [0,1]
Animatable
Yes
CSS Version
Candidate Recommendation
JavaScript syntax
object.style.shapeImageThreshold

Syntax

shape-image-threshold: <number>

Values

  • <number>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. A threshold value outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

Example

<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>
#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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX37622410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3737622410.34.0

Last updated by CSSPortal on: 10th December 2019