clip-path hides the parts of an element outside a shape you define, so the element appears cut into that shape.

Can I animate clip-path?

Yes — transitions between polygons with the same number of points animate smoothly.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Clip-path Generator

Cut any element into a custom shape. Choose from polygon, circle, ellipse and inset shapes, preview the result on a gradient and copy the clip-path value.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Shape

Color 1

Color 2

Size220px

Live preview

Generated CSS

.clipped {
  width: 220px;
  height: 220px;
  background: linear-gradient(135deg, #00ff66, #0066ff);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

// Example output

.clipped {
  width: 220px;
  height: 220px;
  background: linear-gradient(135deg, #00ff66, #0066ff);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

// Features

▸12 built-in shapes
▸Polygon, circle, ellipse and inset
▸Gradient preview surface
▸Pure CSS, no SVG
▸Copy or download

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Clip-path Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.