CSS Clip Path Generator
Draw polygons with draggable points, or dial in circle, ellipse, inset and path() shapes on a live preview — then copy clean, dependency-free CSS. Everything runs in your browser; nothing is uploaded.
Design
path() coordinates are pixels from the element’s top-left corner (percentages are not allowed). Scale the numbers to resize the shape.
Preview box
Output
Drag the points · click an edge to add a point · double-click a point to remove it (min 3)
Worked examples
Copy-ready recipes — hit Load to open one in the editor, or Copy to grab the CSS.
Slanted hero section
The classic diagonal divider: full-width top edge, bottom edge rising to the right.
clip-path: polygon(0% 0%, 100% 0%, 100% 82%, 0% 100%);
Circle avatar
Turn any square image into a perfect circular profile picture.
clip-path: circle(50% at 50% 50%);
Hexagon badge
Six-sided badge for icons, avatars and game-style UI elements.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Arrow button
Right-pointing arrow for CTAs, carousels and step indicators.
clip-path: polygon(0% 30%, 60% 30%, 60% 10%, 100% 50%, 60% 90%, 60% 70%, 0% 70%);
Star sticker
Five-point star for ratings and promo stickers. Pair it with filter: drop-shadow(...) — box-shadow gets clipped away, drop-shadow follows the star.
clip-path: polygon(50% 4%, 61.76% 35.82%, 95.65% 37.17%, 69.02% 58.18%, 78.21% 90.83%, 50% 72%, 21.79% 90.83%, 30.98% 58.18%, 4.35% 37.17%, 38.24% 35.82%);
Frequently asked questions
What is the CSS clip-path property, and how is it different from mask?
clip-path clips an element to a basic shape — polygon(), circle(), ellipse(), inset() or path() — hiding everything outside it with a hard edge. mask (mask-image) instead uses an image or gradient’s alpha/luminance to hide parts, so it supports soft, feathered edges and partial transparency. Rule of thumb: use clip-path for crisp geometric shapes and slanted sections; use mask for fades, vignettes and textured edges. If you need mask-image code, see our CSS mask-image generator at /tools/css-mask-image/.
Which browsers support clip-path?
Every current release of Chrome, Edge, Firefox and Safari supports clip-path with polygon(), circle(), ellipse(), inset() and path() — no vendor prefix is needed anymore. This generator still offers an optional -webkit- line if you need to cover very old browsers.
Can you animate clip-path?
Yes, with plain CSS transitions or @keyframes — but both shapes must be the same function with the same number of points. For example, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) transitioning to polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) tweens a square into a diamond; two polygons with different point counts will snap instead of interpolating. circle() and ellipse() interpolate when both sides use the same radius/position format.
Should I use percentages or pixels in polygon()?
Percentages are relative to the element’s own box, so polygon(50% 0%, 100% 100%, 0% 100%) renders the same triangle on a 40px icon and a full-width hero — it scales for free. Pixels are absolute and suit fixed-size badges. This generator defaults to %, with a px toggle for pixel-exact work.
Why does path() only work with px units?
path() takes an SVG path string whose coordinates are user units (pixels) measured from the element’s top-left corner — the CSS spec does not allow percentages inside path(). So path("M150 270C…") renders at a fixed size; scale it by editing the numbers. Use polygon() with % when you need a responsive shape.
Why doesn’t box-shadow show up on my clipped element?
clip-path cuts away everything outside the shape — including the element’s own box-shadow, which is painted outside the border box. Use filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)) on the element or its parent instead: drop-shadow follows the clipped silhouette, shadow included.
How many points can a clip-path polygon have?
There is no hard CSS limit, but each point is a drag handle in this editor, and listing points out of order can produce self-intersecting “bowtie” artifacts — always trace the outline in order, clockwise or counter-clockwise. The minimum is 3 points (a triangle); double-click a handle to delete points down to that minimum.
Is this clip-path generator free? Can I use the CSS commercially?
Yes — it is completely free with no signup, and 100% of the work happens in your browser; nothing you draw is uploaded anywhere. The generated CSS is yours to use in personal and commercial projects, and you can download it as a file.
Free tool by NRTechStudio