offlineutils
100% offline
CSS
Free · no signup
Updated

Clip Path Generator

A Clip Path Generator builds a CSS clip-path value — polygons with draggable vertices, plus circle, ellipse, and rounded inset shapes — from a live visual editor, and copies the exact clip-path declaration, all in your browser.

Drag any point to reshape. Double-click a point to remove it (minimum 3).

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

About Clip Path Generator

clip-path crops an element to a shape without altering the underlying content. This generator lets you start from preset polygons (triangle, hexagon, star, arrow, message, and more) and drag any vertex to reshape it, add or remove points, or switch to circle, ellipse, or rounded-inset modes with sliders. The live preview shows the clip against a gradient so you can judge the result, and the copy-ready output uses percentages so it scales with the element. Nothing is uploaded.

What Clip Path Generator does

  • Draggable polygon vertices with add and remove
  • Presets: triangle, hexagon, octagon, star, arrow, chevron, message, and more
  • Circle, ellipse, and rounded-inset modes with sliders
  • Percentage-based output that scales with the element
  • Live preview over a gradient
  • Runs entirely in your browser — nothing uploaded

When to reach for Clip Path Generator

  • Cutting a diagonal or angled section edge on a landing page
  • Making a hexagon or circle avatar frame without an image mask
  • Creating an arrow or speech-bubble shape in pure CSS
  • Prototyping a custom polygon crop before hand-coding it

How to use Clip Path Generator

  1. 01

    Pick a shape or preset

    Choose polygon (with a preset), circle, ellipse, or inset.

  2. 02

    Shape it

    Drag polygon vertices, or adjust the sliders for circle/ellipse/inset.

  3. 03

    Copy the CSS

    Copy the clip-path declaration into your stylesheet.

When to use Clip Path Generator vs alternatives

AlternativeUse Clip Path Generator when…Use the alternative when…
Clippy (bennettfeely.com/clippy)you want the visual editor bundled with your other CSS tools and no third-party page.you specifically want its exact preset gallery.
An SVG clipPath elementa CSS basic shape (polygon/circle/ellipse/inset) is enough and you want it inline in CSS.you need curved/bezier clip edges, which CSS basic shapes can't express.

Frequently asked questions

What is clip-path used for?
clip-path crops an element to a shape — a polygon, circle, ellipse, or inset rectangle — hiding everything outside it. It's a CSS-only way to make angled section edges, custom avatar frames, arrows, and speech bubbles without editing the image.
Why does the output use percentages?
Percentage coordinates are relative to the element's box, so the same clip-path scales correctly whether the element is 100px or 800px wide. Pixel coordinates would break on resize.
Do all browsers support clip-path?
Yes — the basic shapes (polygon, circle, ellipse, inset) are supported in every modern browser. Very old browsers may need the -webkit- prefix on some values.
Can I edit a polygon after picking a preset?
Yes — drag any vertex to move it, use Add vertex to insert one, or double-click a vertex to remove it (minimum three).

Related tools

Border Radius Generator

Round each corner independently and copy the border-radius CSS.

CSS Gradient Generator

Design linear, radial & conic gradients and copy the CSS.

Glassmorphism Generator

Create frosted-glass CSS with backdrop-blur and copy it.