CSS shape-image-threshold Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The shape-image-threshold CSS property is used to define the transparency threshold for an element's alpha channel when applying CSS shape properties like clip-path or shape-outside. By setting a value between 0 and 1, it determines the level of opacity at which a pixel in the element's image or content is considered part of the shape, affecting how text and other content flows around it. Higher values make more of the content inside the shape considered as part of it, while lower values make less content included in the shape. This property is particularly useful for creating complex and custom text wraps around irregularly shaped elements on web pages, providing greater control over the layout and design.

Initial value: 0
Applies to: Floats
Inherited: No
Computed value: specified number, clamped to the range [0,1]
Animatable: Yes
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

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

Result

Editor