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.

Clip Path Generator

Design polygon clip-path shapes with a live preview.

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%);

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 Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Filter Playground

HTML & CSS

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

CSS Formatter

HTML & CSS

Beautify or minify CSS with safe string handling.

Frequently asked questions

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