CP

CSS Polygon Clip-Path Generator

Home/Tools/Polygon Clip-Path Generator

Generate clip-path polygon shapes — stars, hexagons, arrows — with rotation and color controls.

No sign-up neededRuns in your browserProduction-ready CSS

Preset Shape

Style

200px
0°

Preview — Hexagon

polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)

Generated CSS
.shape {
  width: 200px;
  height: 200px;
  background: #6366f1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: rotate(0deg);
}

Related Tools

Box Shadow Generator

Design complex box shadows with multiple layers, blur, spread, and color options.

Text Shadow Generator

Create eye-catching text shadows with multiple layers and effects.

Border Radius Generator

Fine-tune border radius for each corner with visual preview.