CSS 🔷 Shapes

CSS Clip Path Generator

CSS clip-path lets you clip elements into custom shapes. This generator supports polygons, circles, ellipses, inset rectangles, and star shapes with a live preview.

Live Preview
50
50
50
10
Generated CSS
Adjust parameters above to generate CSS...

How to Use

  1. Select a shape type: polygon, circle, ellipse, inset, or star.
  2. Adjust X/Y position for circle and ellipse shapes.
  3. Control the radius or corner values to resize the shape.
  4. For polygons, the default creates a diamond shape.
  5. Copy the generated CSS and paste it into your stylesheet.

How It Works

Clip-path defines a clipping region using clip-path: shape(...). Only the visible region inside the shape is displayed. Supported shapes include circle(), ellipse(), polygon(), and inset(). This is more performant than overflow:hidden because it's GPU-accelerated.
Back to CSS Generators