CSSAwwwards
+ Submit tool
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.

Shape Presets

Live Preview

Selected: Circle

Adjust Shape

50%
50%
50%

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%);

How to use

01

Choose a shape

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

02

Tune parameters

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

03

Preview the result

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

04

Copy CSS

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

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →