How to use the 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.
Also searched as: 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.
Tools that pair well with the 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.
Frequently asked questions
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.
Can I install Image Shape Mask as a web app and use it offline?
Yes. Image Shape Mask is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.