clip-path generator

Circles, ellipses, insets, custom polygons, and preset shapes — live preview plus the CSS to copy.

Everything runs in this browser.

How to use

  1. Pick a shape mode.
  2. Adjust radii, sides, or polygon points.
  3. Copy the generated clip-path CSS.

What it supports

circle(), ellipse(), inset() with rounded corners, polygon() with 3–24 points, and a dozen named presets. Percentages only — no path(), url() references, or shape() yet.

Related tools

Related guides