CSS clip-path
Free, no sign-up, runs in your browser.
Instead of drawing the shape, use it to cut something else. A `clipPath` in the document plus one CSS property turns an image, a video or a coloured div into the shape — which is how a blob becomes an avatar mask rather than a background.
A CSS clip-path export, trimmed to the first few lines
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
</clipPath>
</defs>
</svg>
/* The element must be 200×200 for the clip to line up. */
.clipped {
width: 200px;
height: 200px;
clip-path: url(#shape-clip);
}What to know
- The element keeps its content: this crops a photograph rather than sitting behind it.
- Needs both the inline `<svg>` block and the CSS rule — the property references the clipPath by id.
- The element has to match the clip's coordinate space, which is why the output states the size.
- Change the id if you use more than one clip on the same page.
Browser support
Supported in every current browser. `clip-path: url(#id)` referencing an inline clipPath is the broadest form — wider than the `path()` and `shape()` function syntaxes, which are newer and not worth the risk when this costs nothing extra.
Size across the presets
Every preset this format can express, measured as the generator emits it. The smallest is Hexagon at 369 bytes; the largest is Splat at 859 bytes. Point count is what drives the difference — each extra point adds a full cubic segment of coordinates.
| Format | Size |
|---|---|
| Hexagon | 369 B |
| Crystal | 374 B |
| Faceted gem | 400 B |
| Mountain peaks | 423 B |
| Rounded triangle | 435 B |
| Swoosh | 438 B |
| Sharp zigzag | 456 B |
| Deep wave | 474 B |
| Cloud edge | 487 B |
| Footer wave | 510 B |
| Arch cut-out | 511 B |
| Pebble | 512 B |
| Gentle wave | 514 B |
| Layered waves | 544 B |
| Soft blob | 548 B |
| Stair step | 550 B |
| Scallop | 574 B |
| Organic blob | 620 B |
| Sparkle | 626 B |
| Organic wave | 670 B |
| Star burst | 769 B |
| Pixel edge | 771 B |
| Flower | 775 B |
| Bubble | 777 B |
| Ripple | 847 B |
| Splat | 859 B |
In more detail
The output uses `clipPathUnits="userSpaceOnUse"` and tells you what size to make the element, rather than the `objectBoundingBox` form that would scale to any element automatically. That looks like the worse choice until you try it: `objectBoundingBox` requires every coordinate to be expressed between 0 and 1, which means re-emitting the path at a different scale and losing most of its precision to rounding. Being explicit about the size keeps the curve exactly as it was drawn.
Questions
Which shapes work as CSS clip-path?
This format covers Wave, Blob. That is a real constraint rather than a limitation of this tool — where a generator is missing from that list, the format genuinely cannot express it, and offering it anyway would hand you something that silently draws the wrong shape.
How big is a CSS clip-path export?
Between 369 and 859 bytes across the 26 presets that support it. Fewer points is the lever that matters; smoothness and colour cost nothing.
Can I edit it by hand afterwards?
Yes. The output is plain text with no generator comment, no identifying markup and no link back here. Change the colours, rename the class, or paste the path into your own SVG — nothing downstream depends on it staying as it was.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.