Cómo 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.
También se busca como: clip path generator, clip-path polygon, css shapes, clip path maker, polygon generator css, clip-path circle, css image shape, clippy alternative.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar CSS Clip-path Generator como aplicación web y utilizarla sin conexión?
Sí. CSS Clip-path Generator es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.