CSS Clip Path Generator

Design CSS clip-path shapes with a live preview. Choose circle, ellipse, inset, or a polygon preset, then copy the generated CSS instantly.

CSS Clip Path Generator

Pick a shape, adjust its parameters, and preview the clipped element in real time.

Presets
Generated CSS
.clip-path-shape {
  clip-path: circle(50% at 50% 50%);
}