PLAY CSS
jaen

Layout

shape-image-threshold

shape-image-threshold sets, as a number from 0 to 1, how opaque a part of a shape-outside image must be to count as part of the shape.

Syntax

<opacity-value>

Preview

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
Presets
Drag the bottom-right corner to resize

Code

.box {
  display: block;
}

.box > :nth-child(2) {
  float: left;
  width: 8em;
  height: 8em;
  background: linear-gradient(
    to bottom right,
    #4a86cb,
    #4a86cb00
  );
  shape-outside: linear-gradient(
    to bottom right,
    #4a86cb,
    #4a86cb00
  );
  shape-image-threshold: 0.5;
}

Controls

shape-image-threshold0.5
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。

About

Values

  • Number: the shape covers the pixels more opaque than this value. The initial value is 0, so any pixel with some color counts. With 0.5 only the pixels more than half opaque count, and with 1 the shape is empty, so text no longer avoids the element and runs over it. Values below 0 or above 1 are treated as 0 and 1.
  • Percentage: 50% is the same as 0.5. Only Chrome, Edge, and Firefox support it; Safari ignores the whole declaration.

Things to watch

  • It only matters when shape-outside is an image (a url() or a gradient). It has nothing to do with shapes made from basic shapes or boxes.
  • Only the image's transparency counts, not how light or dark its colors are.

In the preview, supporting declarations float the second item to the left and put a gradient that fades from the top left to the bottom right in both its background and shape-outside. The higher the value, the more only the dense top-left part counts as the shape, and the text moves in along a diagonal.

References

MDN Web Docsshape-image-thresholdSpecificationCSS Shapes Module Level 1Can I useshape-image-threshold

Comments

PLAY CSS