Como 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.
Também pesquisado 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.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o Image Shape Mask como um aplicativo da web e usá-lo offline?
Sim. O Image Shape Mask é 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.