CSS Clip-Path Generator
Generate CSS clip-path shapes visually
What is this tool?
Generates CSS clip-path shapes — triangles, hexagons, arrows, organic blobs, and other non-rectangular shapes — visually, with the corresponding CSS code to copy into your project. Or build your own shape from scratch by clicking points onto a canvas.
How to use it
Choose a shape from the presets, preview it applied to a sample element, and copy the generated CSS clip-path code. Or switch to "Build Your Own" and click to place points around the outline of a custom shape -- at least 3 points -- to generate its clip-path automatically.
Clip-path shapes crop an element rather than resizing it, so make sure your underlying image or content is large enough that the important parts survive being cropped into the shape you choose. The Blob shapes and Diagonal Section are currently common in web design for softer, less rigid-looking layouts than a plain rectangle. When building a custom shape, place points in order around the outline (clockwise or counter-clockwise) rather than jumping across the shape, or the polygon can end up with crossed, self-intersecting edges.
More from Design & Color:
Advertisement