CSS 🔷 Shapes

Clip-Path Generator

Generate CSS clip-path property values for various shapes: polygons, ellipses, circles, and inset rectangles. Adjust parameters with live preview and copy the ready-to-use CSS directly to your project.

Controls

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

How to Use

  1. Select the shape type you want to generate.
  2. Adjust the parameters using the sliders: points for polygon, radii for ellipse/circle, inset values for rectangles.
  3. Use Center X/Y sliders to position ellipse and circle centers.
  4. Copy the generated CSS from the output area.

How It Works

Polygon points are calculated by distributing vertices evenly around a circle using sine and cosine. Ellipse and circle use CSS clip-path radial syntax with percentage radii. Inset uses rectangular cutout syntax with optional border-radius rounding.

Related Tools & Services

GoDaddy.com

Website builder, domains and hosting.

Visit GoDaddy.com →

Hostinger

Web hosting to deploy your designs.

Visit Hostinger →
Back to CSS Generators