Cómo usar: Image Shape Mask
- Pick a shape — the same shapes as the clip-path generator, plus a heart.
- Raise Feather for a soft edge, or keep it at 0 for a crisp cut.
- Change Size to shrink the shape inside the element, and try Use my image.
- Copy the CSS — the shape is an inline SVG, so no extra file is needed.
Shape masks vs. clip-path
clip-path cuts a crisp shape and is the simplest option when you need hard edges. A shape mask uses an SVG as mask-image: it can have soft, feathered edges, can be scaled with mask-size and positioned with mask-position, and works with any SVG shape — even your own logo (choose “My image or SVG as the mask”).
For hard-edged shapes with draggable points, use the Clip-path Generator; for organic shapes, the SVG Blob Generator.
También se busca como: css image shape, mask image with shape css, heart shape image css, star shape image, hexagon image css, shape cutout css, css mask svg shape.
Herramientas que combinan con: Image Shape Mask
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- Fade Image Edges with CSS — Give photos and hero images soft, faded edges with a single CSS rule — no image editing.
- 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.
Preguntas frecuentes
How do I put an image inside a heart or star shape?
Choose the shape here and copy the CSS: it sets an inline SVG of the shape as mask-image on your image, so only the inside of the shape shows.
Can the shape have soft edges?
Yes — raise Feather. The SVG shape is blurred, so the image fades out at the edge. clip-path can’t do this; it always cuts hard edges.
Can I use my own shape or logo?
Yes — choose “My image or SVG as the mask” and upload a PNG with transparency or an SVG.
¿Puedo instalar Image Shape Mask como aplicación web y utilizarla sin conexión?
Sí. Image Shape Mask 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.