The web doesn’t have to be boxy. Historically, every element in a page is rendered as a rectangle of some kind, but it doesn’t have to be this way. With CSS Shapes you can create web layouts every bit as stylish as print magazines, but with all of the advantages of the web.
CSS Shapes let your web designs break out of the rectangular grid. All of those classic magazine design elements like non-rectangular text flow and shaped images can be yours, for the low low price of using a new CSS standard. Text can flow, images can be rounded, even just a few non-parallel lines can make your site stand out and make your brand distinctive. Standing out is the biggest challenge most sites face today. Shapes can help!
The Standard
The shape of your elements can be controlled with just two CSS properties: shape-outside
and clip-path
.
The shape-outside
property changes the way content flows outside of a floated DOM element. It affects layout, not drawing. The clip-path
property changes the clipping boundary of how the DOM element is drawn. It affects drawing, not layout.
Because these two properties are separate, you can use one, or both, or none — to get just exactly the effect you are looking for. The good news is that both of these use the same basic-shape
syntax.
Want to clip your image to be in a circle? Just use clip-path: circle(50%)
. Want to make text wrap around your image as if it were a circle, just use shape-outside: circle(50%)
. The shape syntax supports rectangles, circles, ellipses, and full polygons. Of course, manually positioning polygons with numbers is slow and painful. Fortunately there is a better way.
The Shape Path Editor
With the Shape Path Editor in Firefox 62, you can visually edit the shape directly from the CSS inspector. Open your page in Firefox, and use Firefox Developer Tools to select the element whose shape you want to modify. Once you select the element there will be a little icon next to the shape-outside
and clip-path
properties if you have used one of them. If not, add shape-outside
and clip-path
to that element first. Click on that little icon to start the visual editor. Then you can directly manipulate the shape with your mouse.
Open the Inspector and select the element you want to modify:
Click the icon next to clip-path
or shape-outside
. If the element doesn’t have one of these properties, add it, then select it.
Edit the clip path:
Edit the outside shape:
Check out this live demo on glitch.
To learn more about how to use the CSS Shape Editor read the full documentation.
Progressive Enhancement
CSS shapes are here and they work today in most browsers, and most importantly they degrade gracefully. Readers with current browsers will get a beautiful experience and readers with non-compliant browsers will never know they are missing anything.
Stunning Examples
Here are just a few examples of the amazing layouts you can do with CSS Shapes:
Page layout text effects with clip-path
:
Plants and background effect using clip-path
:
Minion using shape-outside
:
Break out of the Box
Shapes on the web are here today, thanks to shape-outside
and clip-path
. Using the Firefox Shape Path Editor makes them even easier to use.
How will you make your website break out of the box? Let us know how you’re using Shapes.
About Josh Marinacci
I am an author, researcher, and recovering engineer. Formerly on the Swing Team at Sun, the webOS team at Palm, and Nokia Research. I spread the word of good user experiences. I live in sunny Eugene Oregon with my wife and genius Lego builder child.
2 comments