Your browser does not support the shape() function, which means you won't be able to see the shapes as intended.

Ship-shape CSS generators

Ahoy! Welcome to ship-shape.win, your go-to skiff for creating and customizing CSS shapes. This site has a collection of CSS generators for creating common (and some uncommon) shapes. The generated CSS uses the shape() function, which can be used as a value for the clip-path and offset-path properties.

You can generate various parametric shapes, and the editor allows you to create and modify shapes interactively. The parametric shapes can also be imported into the editor for further customization.

Generators

Regular polygon

Regular polygon with a chosen number of sides and radius. The "swell" parameter makes it less regular.

Star

Why be regular when you can be a star? Choose a number of points, an inner and an outer radius.

Squircle

Everybody's favourite shape, a square with smoothly rounded corners.

About the `shape()` function

There are other ways to define shapes for clip-path and offset-path, such as using the path() or polygon() functions. These are older and have better browser support. So why use shape()?

path() uses SVG syntax that is optimised for brevity and as such can be hard to read. shape() is arguably easier to read and modify by hand.
path() only supports pixel values, making it hard to use in responsive settings. shape() supports percentages and all length values. Better yet, it allows using math functions like calc() too!
The polygon() function also allows many units, but has no support for curves.

That's not to say that the older functions are bad by any means. If they work for your use case, use them and enjoy the browser support! This site is not here to convince you to use shape() for everything, but rather about exploring what the shape() function can do for us, and to inspire learning, experimentation, and creativity.

Browser support

shape() is a newer function, but it is supported in Chrome, Edge, and Safari since early 2025. At the time of writing this, Firefox has implemented it in their nightly build, but not yet in a stable release. As such, this site is best viewed in an up-to-date Chromium-based browser or Safari for the moment. Normally I wouldn't be too happy about that, but since the site is specifically about shape() I think it's acceptable.