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.

Initial value0.0
Applies tofloats
Computed valueThe same as the specified value after clipping the <number> to the range [0.0, 1.0].
Animatableyes, as a number
Canonical orderthe unique non-ambiguous order defined by the formal grammar


/* <number> value */
shape-image-threshold: 0.7;

/* Global values */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;


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




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 Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) No support No support No support 7.0 -webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) No support No support No support ?

See also

Document Tags and Contributors

 Contributors to this page: Siilwyn, teoli, Sebastianz, fscholz, shaunw, rebeccahauck
 Last updated by: Siilwyn,