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 interactivel…
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
A rotating blue hexagon, an orange pentagon alternating between bulging and contracting sides, and a green flower shape that fades in and out.
Regular polygon with a chosen number of sides and radius. The "swell" parameter makes it less regular.
Star
A pulsating green five-pointed star, a pink/orange star whose many points alternate between poking in or out, and a partially obscured blue star with broad and short points.
Why be regular when you can be a star? Choose a number of points, an inner and an outer radius.
Squircle
Square shape with smoothly rounded corners, animating between different amounts of curvature.
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 likecalc()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.