Built-in toolFree · No signup

CSS Clip Path Generator

Pick from 14 shape presets — circle, ellipse, triangle, rhombus, pentagon, hexagon, star, arrows, chevron, parallelogram, and more. For circle and ellipse shapes, fine-tune radius and centre position with sliders. The live preview updates instantly, and the output includes both the standard and -webkit- prefixed declarations.

Share on X LinkedIn

Shape Presets

Live Preview

Selected: Circle

Adjust Shape

Radius50%

Center X50%

Center Y50%

clip-path value

circle(50% at 50% 50%)

CSS Output

-webkit-clip-path: circle(50% at 50% 50%);clip-path: circle(50% at 50% 50%);

Was this tool helpful?

How to use

Choose a shape

Click any shape preset button — Circle, Triangle Up, Star, Hexagon, Arrow Right, and 9 more.

Tune parameters

For Circle, adjust radius and centre X/Y with sliders. For Ellipse, control both radii and centre position.

Preview the result

See the clip-path applied live to a 260×260 gradient square. The shape updates as you change parameters.

Copy CSS

Hit Copy CSS to get both -webkit-clip-path and clip-path declarations with full browser support.