How to use the CSS Clip-path Generator
- Pick a starting shape — polygons, circle, ellipse or a rounded inset.
- Drag the points over the image. Select a point and use + Add point to insert one after it, or Remove point — start from Rectangle to draw your own shape.
- For circles, ellipses and insets use the sliders in the panel.
- Copy the CSS and apply it to any image, video or element — use Use my image to preview with your own picture.
clip-path in a nutshell
clip-path hides everything outside a shape. The element keeps its size and layout; only the visible area changes — which makes it perfect for hero images, avatars, section shapes and hover effects (clip-path values with the same number of points can be animated with transition).
| Function | Example |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — a triangle; any number of points |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — a rounded rectangle cut in from the edges |
Percentages are relative to the element’s box, so the shape scales with it. Every modern browser supports clip-path shapes; the -webkit- line covers older Safari. To fade edges instead of cutting them, use the CSS Mask Generator; for organic shapes, the SVG Blob Generator.
Also searched as: clip path generator, clip-path polygon, css shapes, clip path maker, polygon generator css, clip-path circle, css image shape, clippy alternative.
Tools that pair well with the CSS Clip-path Generator
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- CSS Triangle Generator — Make a pure-CSS triangle for a tooltip arrow, dropdown caret or speech bubble: choose one of 8 directions, the width, height and color, and copy either the classic border trick or a simpler clip-path version.
- CSS Filter Generator — Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS.
- SVG Wave Generator — Design wavy section dividers for landing pages: add or remove waves (up to 6, each with its own color, opacity and shape), set the number of crests, height and smoothness, choose colors and whether the wave sits at the top or bottom.
Frequently asked questions
How do I make a CSS polygon shape?
Pick a starting shape here, drag the points where you want them and copy the clip-path: polygon(…) line. Each point is an x% y% pair relative to the element.
How do I add more points to a clip-path polygon?
Select a point and click + Add point: a new point appears halfway to the next one, ready to drag. Double-clicking the image adds a point on the nearest edge; Remove point deletes the selected one.
Can I animate clip-path?
Yes — transition or animate between two clip-path values of the same type with the same number of points, for example two polygon() shapes with 6 points each.
Does clip-path work in all browsers?
Basic shapes (polygon, circle, ellipse, inset) work in all modern browsers. Add the -webkit-clip-path line the tool includes for older Safari versions.
Why does my shadow disappear with clip-path?
clip-path also clips box-shadow. Wrap the element in a parent and use filter: drop-shadow() on the parent instead.
Can I install CSS Clip-path Generator as a web app and use it offline?
Yes. CSS Clip-path Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.