shape-image-threshold sets the opacity level at which an image-based shape boundary is drawn. With a smooth gradient, it can move text wrapping inward to partially opaque areas. section 14.4.2
Allow overlap into a gradient
Set shape-image-threshold: 0.3 to wrap text where the gradient reaches 30% opacity, allowing text to overlap an image while it remains partially opaque. section 14.4.2
Listing 14.17 A shape defined by a gradient
.poem-image {
float: left;
--gradient: linear-gradient( #1
65deg, #1
black 0 375px, #1
transparent 375px); #1
mask: var(--gradient);
shape-outside: var(--gradient);
shape-margin: 15px;
}
.poem-image > img {
display: block;
height: 350px;
object-position: -100px 0; #2
}
Pairs a linear gradient with shape-outside and shape-margin to create a diagonal text-wrapping shape; adjust the threshold to change its effective edge. section 14.4.2
