Can I start from a preset and tweak it?

Yes, choosing a preset loads its points, which you can then edit freely.

What's the minimum number of points?

A polygon needs at least three points.

Does it support percentage-based coordinates only?

Yes, percentages keep the shape responsive to the element's size.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

Does it work offline and on mobile?

Yes. Once the page has loaded it keeps working without a network connection, and the layout is responsive so it stays usable on phones and tablets.

Clip Path Generator

Design polygon clip-path shapes with a live preview.

Support

Works Offline

Privacy First

No Login

No API

Points

Preset shape

Preview

CSS output

.element {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

About the Clip Path Generator

Pick a preset polygon shape or add and edit points manually to build a custom CSS clip-path. Preview the shape live over a gradient and copy the generated CSS.

Examples

Hexagon

6 points

Output

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Filter Playground

HTML & CSS

Tune blur, brightness, contrast, and more with a live preview.

CSS Gradient Generator

HTML & CSS

Design linear, radial, and conic gradients visually.

CSS Grid Builder

HTML & CSS

Design CSS grid layouts with live preview.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser