So nutzt du: 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.
Auch gesucht als: clip path generator, clip-path polygon, css shapes, clip path maker, polygon generator css, clip-path circle, css image shape, clippy alternative.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich CSS Clip-path Generator als Web-App installieren und offline nutzen?
Ja. CSS Clip-path Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.