Exploring Creativity with shape-outside

Previously, I posed the question, “Why do so many long-form articles seem visually uninteresting?” I elaborated by saying:

“Images in long-form content can (and often should) serve more than just an illustrative purpose. They can influence how readers navigate, interact with, and understand the content. They set the tempo, affect emotions, and add depth that words alone may not fully capture.”

I then explored the creative potential of CSS Shapes and how using `shape-outside` allows text to wrap around an image’s alpha channel, adding vitality to the design.

There are numerous creative ways to utilize `shape-outside`, and I’m often surprised at its infrequent use. So, how can you use it to enhance a design’s character? Here’s my approach.

Patty Meltt is a rising star in country music and needed a website to promote her new album and tour. She wanted it to be unique and memorable, so she approached Stuff & Nonsense. Patty may be fictional, but the challenges of designing such sites are real.

Most `shape-outside` guides begin with circles and polygons. While that’s helpful, it only addresses the how. Designers need the why — without it, it’s just another CSS property.

Every image, regardless of its subject, resides within a box. By default, text flows above or below this box. If I float an image left or right, the text wraps around the rectangle, regardless of the content within. `Shape-outside` overcomes this limitation.

`Shape-outside` allows designs to break free from those boxes by enabling layouts that respond to an image’s contours. This transition from boxed images to letting the image content dictate the layout is what makes `shape-outside` so intriguing.

Text blocks around straight-edged images can seem static. But when text flows around a guitar or curves around a portrait, it creates movement, making the story more engaging.

CSS `shape-outside` allows text to flow around any custom shape, including an image’s alpha channel:

“`css
img {
float: left;
width: 300px;
shape-outside: url(‘patty.webp’);
shape-image-threshold: .5;
shape-margin: 1rem;
}
“`

To recap: for text to wrap around elements, they must float left or right with a defined width. The `shape-outside` URL selects an image with an alpha channel like PNG or WebP. The `shape-image-threshold` property sets the alpha channel threshold for shaping. Lastly, `shape-margin` creates a margin around the shape.

Interactive examples from this article are available in my lab.

When adding images to a long-form article, I consider how they can enhance the reader’s experience. Flowing text around images can slow readers, making their experience more immersive. Visually, it integrates text and image, making them part of a cohesive composition rather than isolated elements.

Patty’s life story — from singing in honky-tonks to headlining stadiums — includes two sections: one about her, the other about her music. I added a tall vertical image of Patty to her biography and two smaller album covers to the music column:

[…]

[…]

[…]

A simple grid then creates the two columns:

“`css
#patty {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 5rem;
}
“`

I prefer designs to be flexible, so instead of using static pixel widths and margins, I use percentages for column widths, making their size relative to the container’s size:

“`css
#patty > *:nth-child(1) img {
float: left;
width: 50%;
shape-outside: url(“patty.webp”);
shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(1) {
float: left;
width: 45%;
shape-outside: url(“album-1.webp”);
shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(2) {
float: right;
width: 45%;
shape-outside: url(“album-2.webp”);
shape-margin: 2%;
}
“`

Text now flows around Patty’s tall image without clipping paths or polygons — just her image’s natural silhouette shaping the text.

When an image is rotated using a CSS `transform`, ideally, browsers would reflow text around its rotated alpha channel. Unfortunately, they don’t, so