Drag points to reshape
Click on the shape edge to add a point. Right-click a point to delete it.

Presets

Preview

CSS Output

clip-path: polygon(...);
polygon · 0 points

How to Use the CSS Clip-Path Maker

  1. Choose a preset from the shape gallery — triangle, star, hexagon, and more.
  2. Drag the white control points to reshape the polygon to your liking.
  3. Double-click on the canvas to add new points along the nearest edge.
  4. Right-click a point to remove it (minimum 3 points).
  5. Customize the shape color and background color in the Preview panel.
  6. Upload an image to see how your clip-path looks on a real photo.
  7. Copy the CSS and paste it directly into your stylesheet.

Understanding clip-path

The clip-path CSS property lets you define a visible region for an element — everything outside is hidden. The most flexible value is polygon(), which takes a list of percentage coordinates:

/* Triangle */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

/* Hexagon */
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);

/* Star */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

Other clip-path functions include circle(), ellipse(), and inset().

Browser Support

clip-path with polygon() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). No vendor prefix needed as of 2025.

Related Tools

Generate gradients → Gradient Gallery

CSS specificity → CSS Specificity Calculator