Como usar: 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.
Também pesquisado como: clip path generator, clip-path polygon, css shapes, clip path maker, polygon generator css, clip-path circle, css image shape, clippy alternative.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o CSS Clip-path Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Clip-path Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.