This site uses privacy-friendly, first-party analytics to see which pages and tools are useful. No data is shared with third-party trackers or advertisers. Learn more

Tools · CSS · Clip-path generator

Clip-path generator

Build a CSS clip-path shape - polygon, circle, ellipse, or inset - with a live preview, and copy the code.

Drop a file here, or choose one.

Runs fully in your browser. Nothing is uploaded.

How it works

  1. Pick a shape type (polygon, circle, ellipse, or inset), or a polygon preset.

  2. Drag the points on the preview, or use the sliders, to refine the shape.

  3. Copy the generated clip-path CSS.

Frequently asked questions

No. The shape is generated and rendered entirely in your browser - this is just math and CSS text.

Not in this version - pick the closest preset and drag its existing points. A full point editor is a possible future addition.

Some combinations - like an inset that covers the whole box - are valid CSS that clips everything away. Not a bug, just a degenerate but legal value.

Yes. Tab to a point and use the arrow keys to nudge it - Shift for a bigger step.

Related tools

CSS gradient generator

Build a linear, radial, or conic CSS gradient and copy the code.

 Box-shadow generator

Build a layered CSS box-shadow with a live preview, then copy the code.

 Border-radius generator

Shape every corner of a box, or blend them into an organic blob, and copy the border-radius CSS.

 Glassmorphism generator

Build a frosted-glass card with backdrop blur, transparency, and a soft border, and copy the CSS.

 Cubic-bezier easing generator

Drag a curve to build a cubic-bezier() easing value, watch it play with a live CSS transition, and copy the code.

 CSS minifier & beautifier

Minify or beautify CSS, live as you paste, entirely in your browser.

 Flexbox playground

Build a CSS flexbox layout - direction, wrap, justify, align, gap, and per-item grow/shrink/basis - with a live preview, and copy the code.

 Grid playground

Build a CSS grid layout - track count, gaps, alignment, and per-item placement - with a live preview, and copy the code.

Comments

  1. No comments yet. Be the first to share your experience.
Your rating (optional)

No rating selected