ToolPilot
Design

CSS Clip-Path Generator

Create polygon, circle and shape clip-paths with preset shapes and editable points.

Cut elements into triangles, hexagons, stars and custom polygons. The live preview updates as you edit the point list, and the CSS is ready to paste.

Loading the tool…
Privacy: A fast, private ToolPilot utility. Your data is processed locally in your browser whenever possible.

How to

  1. 1Pick a preset or start with a polygon.
  2. 2Edit the points in the text area.
  3. 3Copy the clip-path CSS.

Frequently asked questions

Can I animate clip-path?

Yes. Browsers can transition between compatible polygon shapes with the same number of points.

Are my files uploaded to a server?

No. This tool runs entirely in your browser using JavaScript and WebAssembly where needed. Your files and text never leave your device.

Help Us Improve

We regularly improve our tools. Found a problem or have a suggestion? We're listening.

Related tools

🎨

Color Picker + HEX/RGB/HSL

🎯

HEX / RGB / HSL Converter

🌈

Color Palette Generator

🌊

CSS Gradient Generator