Comment utiliser : 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.
Aussi recherché comme : 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.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer Image Shape Mask en tant qu’application web et l’utiliser hors ligne ?
Oui. Image Shape Mask est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.