CSS Shape Generator
Pick a shape, drag its points, copy the CSS. Over 110 presets rendered with the very code you take away - responsive percentages, no images, no libraries.
Free and browser-based - no sign-up needed. Start the app when you are ready.
Shapes with a page of their own
The studio holds the whole library, and picking a shape there never leaves the page. These twelve also have a page each, because they are the ones people come looking for by name - with the shape already loaded, the code ready to copy, and an explanation of how it is built.
About the CSS Shape Generator
CSS can cut an element into almost any silhouette without a single
image. clip-path takes a list of points and clips everything
outside them; border-radius with eight values bends the corners
into organic blobs. Both are supported in every current browser, both scale
with the element, and neither costs a network request. What they are not is
easy to write by hand - which is what this tool is for.
Pick a shape, tune it with its own controls, drag the points where you
want them, and copy the rule. The preview is not a picture of the result: it
is a plain <div> with the generated declarations applied
to it, so what you see on screen is literally the code you take away.
How it works
- Click Open CSS Shape Generator and choose a shape - browse the library by group, or search by name.
- Shape it: every preset has its own settings, plus rotation and flip. Drag any control point to move it, double-click an edge to add one, alt-click a point to remove it. Hold Shift while dragging to snap to a 5% grid and keep the numbers tidy.
- Check it at the size you need. A shape always fills the element it
is clipped from, so how big it ends up is a matter of the
widthyou give that element - not something baked into the rule. The preview zoom shrinks the element so you can see whether the fine detail still reads at 40 pixels; it never changes the code. - Copy the code as CSS, as HTML with the rule included, or as an SVG file - or download it from the save dialog.
Why percentages matter
Every shape here is written in percentages, never pixels. That is what
makes the result responsive: the same rule works on a 40-pixel avatar and a
full-width hero, and the shape follows the box instead of being stranded at
one size. It is also why curves are drawn as many short straight segments.
CSS does have clip-path: path(), which keeps real bezier curves,
but it only accepts absolute pixel coordinates - so a curve that stays exact
is a shape that stops being responsive. Enough segments and the difference is
invisible; the Smoothness control on curved shapes decides how many.
Aspect ratio, the part most generators skip
Some shapes only hold their proportions in a box of the right shape. A
regular hexagon needs roughly 1 : 1.1547, a circle needs a square, and put
either in the wrong box and you get a squashed version of the shape you
asked for. Where a preset needs a particular ratio, the generated rule
includes aspect-ratio so it looks right wherever you paste it.
You can switch that off if your layout already fixes the size.
What can I use the shapes for?
Section dividers and angled hero edges, avatars and image masks, badges and ribbons on cards, speech bubbles for testimonials and chat, arrows and chevrons for breadcrumbs and progress steps, decorative blobs behind headings. Everything you generate is yours to use freely, in personal and commercial work alike, with no attribution required. For a repeating surface pattern instead of a single shape, try our Pattern Maker; for organic blobs as downloadable SVG artwork rather than CSS, see the Blob Maker.
Frequently asked questions
Is the CSS Shape Generator free?
Yes, completely free, with no account, watermark or usage limits. The shapes and the code you generate are yours to use in your own work, commercial projects included - see our License.
Which browsers support these shapes?
All current ones. clip-path with polygon(),
circle(), ellipse() and inset()
works in Chrome, Edge, Firefox and Safari on desktop and mobile, as does
multi-value border-radius. Nothing here needs a prefix or a
fallback for a browser still in general use.
Do the shapes stay sharp when the element resizes?
Yes. The coordinates are percentages of the element's own box, so the shape is recomputed by the browser at whatever size it ends up. There is no image to go blurry and no fixed dimension to fight your layout.
Can I put content inside a clipped element?
You can, but remember that clip-path clips everything -
text and children included. Keep text well inside the visible area, or
put the shape on a background element behind the content rather than on
the content itself. Skewed shapes like the parallelogram have the same
catch: the usual fix is to skew the box one way and the inner content
back the other.
Why is my curved shape made of so many points?
Because clip-path: polygon() only draws straight edges,
so a curve is approximated with short segments. More segments mean a
smoother curve and a longer rule; the Smoothness control lets you decide
where to stop. If you would rather have mathematically exact curves and
do not need the shape to be responsive, export as SVG instead.
Can a shape have a hole in it?
Not with a single polygon(). The frame preset gets close
by tracing the outer edge and the inner one in the same path, which works
for simple cases. For a true hole - a ring, say - an SVG mask is the
honest tool, and the SVG export gives you the outline to build one
from.
Can a clipped shape have a border?
Not through the border property. A border is painted on
the element's box and then clipped away along with everything else
outside the path, so it simply disappears. The Border control works
round it with two layers on one element: the element carries the border
color, and the same shape - inset by the border width - sits on a
::after above it in the fill color. The inset outline is a
true offset rather than a scaled copy, which is what keeps the ring the
same thickness on a sloping edge as on a straight one.
Blobs are the exception. Nothing about them is clipped, so they take
an ordinary border, and keep box-shadow and
background images along with it.
What about the border-shape property?
It is the right long-term answer, and it is not usable yet.
border-shape takes the same <basic-shape>
values as clip-path, but where a clip only masks the box,
this redefines it: the background, the border, the focus outline and
box-shadow all follow the new outline instead of being cut
off at it. It even has a two-shape fill mode -
border-shape: polygon(...) polygon(...) - which is exactly
the outer-and-inner pair this tool already computes for the two-layer
rule.
The catch is availability. At the time of writing it ships only in
Chrome Canary behind the experimental web platform features flag, and
the people building it describe it as early and buggy. Two smaller
things to know for later: border-style is ignored, so the
border renders solid whatever you ask for, and it cannot be combined
with border-radius. That is why the generated rule stays on
the two-layer version, which works in every browser today. When you do
want the shadow to follow the shape, add border-shape
yourself behind an @supports test and keep the two layers
as the fallback.
Is anything uploaded to a server?
No. The shapes are generated and exported entirely in your browser; nothing is stored when you close the page.