Clip-Path Generator

Visual polygon and shape clip-path builder with live preview and copyable CSS output.

Shape

Shape function

Presets

point 1 — 25% 0%

point 2 — 75% 0%

point 3 — 100% 50%

point 4 — 75% 100%

point 5 — 25% 100%

point 6 — 0% 50%

Live preview

Generated CSS

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