CSS Clip Path Generator

Create CSS clip-path shapes with preset templates and live preview.

Shape
Radius50%
Preview
CSS Code
clip-path: circle(50% at 50% 50%);

How to Use

Select a shape preset from the buttons. For circle and ellipse shapes, adjust the radius sliders to fine-tune the size. The preview area shows the clipped shape in real time. Copy the CSS clip-path code to use in your stylesheets.

FAQ

Related Tools