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

Presets

<!-- Background -->
<div class="cp-card">
  <h3>Preview</h3>
  <div class="cp-bg-row">
    <label>Shape color</label>
    <input type="color" class="cp-color-input" id="cp-shape-color" value="#6366f1">
  </div>
  <div class="cp-bg-row">
    <label>BG color</label>
    <input type="color" class="cp-color-input" id="cp-bg-color" value="#e2e8f0">
  </div>
  <div class="cp-bg-row">
    <label>Image</label>
    <button class="cp-img-btn" id="cp-upload-btn">Upload Image</button>
    <input type="file" id="cp-file-input" accept="image/*" style="display:none">
  </div>
  <button class="cp-reset-btn" id="cp-clear-img" style="display:none">Remove Image</button>
</div>

<!-- Output -->
<div class="cp-card">
  <h3>CSS Output</h3>
  <div class="cp-output-box" id="cp-output">clip-path: polygon(...);</div>
  <button class="cp-copy-btn" id="cp-copy-btn">Copy CSS</button>
</div>

<!-- Shape info -->
<div class="cp-shape-info" id="cp-shape-info">polygon · 0 points</div>
<button class="cp-reset-btn" id="cp-reset-btn">Reset to Preset</button>

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