Why it matters
Angled sections, hexagon avatars and soft blob backgrounds make a site feel designed rather than templated, and they no longer need image files. CSS clip-path works in every current browser, and a small inline SVG is sharper and lighter than a PNG.
Writing the coordinates by hand is the hard part. Dragging the points and copying the result takes seconds, and the blob and divider generators give you shapes that are consistent across a whole site.
How to use it
- Choose Clip-path, Blob or Section divider.
- Start from a preset, then drag the points (or focus one and use the arrow keys).
- For blobs, change the points and wobble, or press New shape. Note the seed to recreate it.
- Copy or download the CSS, SVG or HTML.
FAQ
Does clip-path affect accessibility?
No. It only changes what's painted, so text and links inside stay readable by screen readers. Make sure clipped corners don't hide visible text.
Why does the divider use the next section's colour?
The divider sits at the edge of one section and is filled with the colour of the section next to it, so the two blend into a curved edge.
Can I animate a clip-path?
Yes, between two polygons with the same number of points, using a CSS transition on clip-path.
Is it free to use the shapes?
Yes. Everything you make here is yours to use.
