✂️ CSS Clip-Path Generator

Generate CSS clip-path shapes visually. Create polygons, circles, and ellipses — all in your browser, instant results.

Shape

Points

CSS output

About the CSS Clip-Path Generator

This tool builds CSS clip-path declarations visually. Pick a shape — polygon, circle, or ellipse — tweak the parameters, and copy the generated CSS. The preview updates instantly so you can see exactly what the clip will look like.

Shape types

Polygon — Clips the element to a polygon defined by N points evenly distributed around the center.
Circle — Clips to a circle of the given radius centered at 50% 50%.
Ellipse — Clips to an ellipse with separate X and Y radii.

How to use

Choose a shape from the dropdown.
For polygons, set the number of points (3–20). For circles, set the radius. For ellipses, set X and Y radii.
Click Generate to apply the clip to the preview box.
Click Copy CSS to copy the clip-path declaration.

Frequently asked questions

What does clip-path do? It hides the parts of an element outside the defined shape, letting you create non-rectangular elements without extra markup.

Is it widely supported? Yes, clip-path with polygon(), circle(), and ellipse() is supported in all modern browsers.

Can I animate the clip? Yes — you can transition between clip-path values with CSS transitions or animations.