This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The shape-image-threshold CSS property defines the alpha channel threshold used to extract the shape using an image as the value for shape-outside.

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;
Initial value 0.0
Applies to floats
Inherited no
Media visual
Computed value The same as the specified value after clipping the <number> to the range [0.0, 1.0].
Animation type a number
Canonical order the unique non-ambiguous order defined by the formal grammar



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.

Formal syntax




<div id="gradient-shape"></div>

  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?


#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%,
  shape-outside: linear-gradient(30deg, black, transparent 80%,
  shape-image-threshold: 0.2;



Specification Status Comment
CSS Shapes Module Level 1
The definition of 'shape-image-threshold' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 37 ? 59 No 24 7 -webkit-
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support Yes ? ? 59 No 24 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.