Skip to content
LibraryCSS

Free browser tool

CSS Clip-Path Shape Generator

Start with presets or move polygon points, preview the result live, and copy the production-ready polygon() value.

Live preview

Drag the points directly on the preview.

Generated code

.clipped-shape {
  width: 320px;
  aspect-ratio: 1;
  background: #cc3d0a;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

Controls

Shape presets

6

A visual generator with standard output

This tool turns direct manipulation into plain CSS, SVG, HTML, or an image file. The preview and output are generated from the same state, so the code you copy describes the result on screen.

Use the output anywhere

The generated value has no LibraryCSS runtime dependency. Paste it into a stylesheet, component, prototype, or design handoff and adjust the class name to match your project.

Nothing is stored

All controls run in the browser. Values, generated text, and downloaded assets are not saved to an account or sent to a processing service.