So nutzt du: 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.
Auch gesucht als: 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.
Passende Tools zu: 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.
Häufige Fragen
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.
Kann ich Image Shape Mask als Web-App installieren und offline nutzen?
Ja. Image Shape Mask ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.