Advertisement
Guide
About the CSS clip-path Generator
The CSS clip-pathproperty lets you cut an element into any shape — triangles, hexagons, stars, arrows, circles — without images or masks. It's how you get angled section dividers, shaped avatars, and unusual card layouts with pure CSS.
Writing those coordinates by hand is painful, so this generator lets you drag points around a live preview instead. Pick a shape type, adjust it visually, and copy the exact CSS.
The four shape functions
- polygon() — a list of x/y points; the most flexible, good for stars and arrows.
- circle() — a radius and a center point.
- ellipse() — separate x and y radii with a center.
- inset() — crop in from each edge, with optional rounded corners.
Why percentages matter
Coordinates here are percentages of the element's own box, so the shape scales automatically with the element. That makes a clipped shape fully responsive — the same CSS works on a small card and a full-width hero without adjustment.
Things to watch out for
Clipping hides anything outside the shape, including box-shadows, so wrap the element in a parent if you need a shadow. Clipped areas are also not clickable, which matters for buttons and links. And remember the content itself isn't reflowed — only visually cut.
How to use it
- 1Choose a shape type: polygon, circle, ellipse, or inset.
- 2Start from a preset, or drag the handles to shape it yourself.
- 3Add points for more complex polygons (double-click a handle to remove it).
- 4Copy the generated clip-path CSS into your stylesheet.
Frequently asked questions
What is clip-path used for?
It cuts an element into a custom shape — angled section dividers, hexagon avatars, arrows, and decorative cards — using pure CSS instead of images.
Is clip-path responsive?
Yes, when you use percentage coordinates (as this tool does). The shape scales with the element, so it works at any size.
Why did my box-shadow disappear?
clip-path clips everything outside the shape, including shadows. Put the shadow on a wrapping parent element instead.
Do clipped areas still receive clicks?
No. Areas outside the clip shape are not interactive, which is important to remember for buttons and links.
Is my work uploaded anywhere?
No. The preview and CSS are generated entirely in your browser.