CSS Clip-Path Generator
The free clip-path editor — drag shapes, preview against photos, copy ready-to-paste code.
A free online CSS clip path generator and clip-path maker: design polygon(), circle(), ellipse(), and inset() shapes with drag handles, preview them against solid, gradient, checkerboard, or photo fills, then copy CSS, Tailwind, React, or SVG. This css shape generator runs in your browser — no signup.
What is clip-path?
clip-path is a CSS property that crops an element to a geometric region. Unlike overflow: hidden on a rectangle, clip-path can cut any element — text, images, video — into polygons, circles, ellipses, or inset rectangles. It is one of the most direct ways to build non-rectangular UI shapes without extra markup.
The 4 basic shape functions
polygon() — an arbitrary closed shape defined by percentage or length coordinates. Best for arrows, chevrons, stars, hexagons, and custom silhouettes with straight edges.
circle() — a circle with a radius and center point. Ideal for round avatars, circular badges, and dot masks.
ellipse() — an ellipse with horizontal and vertical radii. Useful for oval crops and organic round shapes.
inset() — an inset rectangle with optional rounded corners via round. Works like a crop box with padding from each edge — great for framed photos and card masks.
Why generate clip-path instead of writing it by hand?
A single polygon can require a dozen coordinate pairs — tedious to type and painful to tweak. This tool lets you drag points visually, snap to a grid for symmetry, preview the result against a real photo, and export the exact value in multiple formats. Pair it with the CSS Border Radius Generator for corner rounding on the element itself, or the CSS Gradient Generator when your clipped element uses a gradient fill.
Named shape reference
| Shape | Function | Points |
|---|---|---|
| Triangle | polygon() | 3 |
| Pentagon | polygon() | 5 |
| Hexagon | polygon() | 6 |
| 5-Point Star | polygon() | 10 |
| Arrow / Chevron | polygon() | 6–7 |
| Circle avatar | circle() | — |
| Rounded crop | inset() round | — |
Frequently asked questions
Is this CSS clip-path generator free?
Yes. Designing shapes, previewing them live, and copying every code format are completely free with no signup. The generator runs entirely in your browser.
What's the difference between clip-path and mask-image?
clip-path defines a geometric region that hard-clips an element. mask-image uses an image or gradient as a soft alpha mask where pixels can be partially transparent. Use clip-path for crisp shape cuts; use mask-image for feathered or image-based masking.
Do I need a vendor prefix for clip-path?
No. Unprefixed clip-path is supported in all current evergreen browsers. The legacy -webkit-clip-path prefix is only needed for very old WebKit versions.
When should I use circle, ellipse, inset, or polygon?
Use circle() or ellipse() for round avatars and organic blobs. Use inset() for padded rectangular crops with optional rounding. Use polygon() for arrows, stars, hexagons, and any custom straight-edged silhouette.
Can I place points outside the 0–100% box?
Yes. This editor allows off-box coordinates for bleed shapes where the clip extends past the element bounds — valid CSS and useful for diagonal cuts.
What is grid-snap for?
Grid-snap rounds polygon points to the nearest 10% step while you drag, making symmetric shapes like hexagons and diamonds easier to build without typing every coordinate.
How does the image preview work?
Switch the preview fill to Image and pick a demo photo. The preview applies your current clip-path so you can see how a real picture looks clipped into your shape — no upload required.
Does this tool store my images or shapes?
No. Everything runs client-side. Shapes are not uploaded. Share links encode the shape in the URL query string only.
Related tools: Border Radius Generator · CSS Gradient Generator · Box Shadow Generator · All Tools →
