mask-image in CSS: Freiformen und weiche Übergänge ohne SVG-Handarbeit

1. Was mask-image leistet und warum CSS-Masken über clip-path hinausgehen

Mit mask-image lässt sich ein Element durch einen Gradient oder eine Bilddatei maskieren, statt es nur rechteckig oder polygonal zu beschneiden. Anders als clip-path, das immer eine harte, geometrisch definierte Kante erzeugt, kann eine CSS-Maske jeden Pixel eines Elements individuell transparent, halbtransparent oder vollständig sichtbar machen, abhängig von der Helligkeit oder dem Alphakanal der Maskenquelle. Genau darin liegt der entscheidende Unterschied: mask-image kennt Zwischenwerte, ein Clip-Pfad kennt nur an oder aus.

Praktisch bedeutet das: Ein Produktbild kann am Rand weich ausfransen, ein Hero-Bereich kann in einer organischen Fläche statt einem Rechteck enden, und ein Icon kann exakt die Kontur einer PNG-Datei mit Alphakanal übernehmen, ohne dass jemand diese Kontur von Hand in ein Polygon überträgt. Der Browser berechnet direkt aus der Maskenquelle, welche Pixel sichtbar bleiben, was gegenüber einem manuell gepflegten SVG-Pfad deutlich weniger Aufwand bedeutet, sobald sich die Form eines Assets später noch einmal ändert.

2. Grundsyntax: mask-image mit Gradienten und Bilddateien

Die einfachste Form von mask-image nimmt entweder eine Bild-URL oder eine der bekannten Gradient-Funktionen als Wert entgegen. Ein linear-gradient von deckend zu transparent erzeugt einen weichen Übergang an einer Kante, ein radial-gradient eine kreisförmige Aussparung in der Mitte, und eine PNG- oder SVG-Datei mit Alphakanal übernimmt exakt deren Transparenzverlauf als Maske für das Element. Zusätzlich steuern mask-size, mask-position und mask-repeat die Platzierung genauso, wie es background-size, background-position und background-repeat für Hintergrundbilder tun.

Der Standardwert von mask-mode ist match-source, wodurch der Browser bei einem SVG automatisch entscheidet, ob der Luminanz- oder der Alphakanal als Maske dient, je nachdem, was in der Datei vorhanden ist. Bei Bitmap-Bildern wie PNG oder WebP greift in der Regel der Alphakanal, während bei reinen Gradienten die Helligkeit jedes Pixels direkt die Deckkraft bestimmt: Weiß bedeutet vollständig sichtbar, Schwarz bedeutet vollständig ausgeblendet, jeder Grauton dazwischen ergibt eine anteilige Transparenz des darunterliegenden Elements.

/* Weicher Fade am unteren Bildrand */
.hero-image {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Kontur einer PNG-Datei mit Alphakanal als Maske */
.product-thumb {
  mask-image: url("/media/masks/torn-edge.svg");
  mask-mode: alpha;
  mask-size: cover;
}

3. Freiformen ausschneiden: radiale und konische Gradienten als Maske

Ein radial-gradient als Maskenquelle erzeugt eine kreisförmige oder elliptische Aussparung, deren Rand beliebig hart oder weich ausfallen kann, je nachdem, wie eng die Farbstopps beieinander liegen. Ein conic-gradient geht noch weiter und erlaubt segmentierte Formen, die wie ein Tortendiagramm wirken, etwa für Badge-Elemente, die nur einen bestimmten Winkelbereich eines Bildes sichtbar lassen sollen. Beide Gradient-Typen lassen sich außerdem kombinieren, indem mehrere Maskenquellen kommagetrennt in mask-image aufgelistet werden.

Der große Vorteil gegenüber einer handgezeichneten SVG-Form ist, dass ein Gradient rein mathematisch beschrieben wird und sich responsiv verhält, ohne dass ein Pfad bei jeder Breakpoint-Änderung neu berechnet werden muss. Eine Freiform, die bei 1200 Pixel Breite gut aussieht, funktioniert bei 400 Pixel genauso, weil mask-size relativ zur Box skaliert. Für organische, unregelmäßige Kanten, die kein Gradient sauber abbilden kann, bleibt eine SVG-Maskendatei die bessere Wahl, für die meisten Freiform-Anforderungen im Shop-Layout reicht ein gut abgestimmter Gradient aber völlig aus.

/* Segmentierte Badge-Form per Kegel-Gradient */
.badge-freeform {
  mask-image: conic-gradient(black 0deg 270deg, transparent 270deg 360deg);
  mask-size: 100% 100%;
}

/* Weich auslaufender Spotlight-Effekt */
.spotlight {
  mask-image: radial-gradient(circle at 30% 40%, black 0%, black 55%, transparent 80%);
}

4. Weiche Übergänge an Bildkanten: Fade-Out-Effekte ohne zusätzliches Markup

Ein klassischer Einsatzzweck von mask-image ist das weiche Ausblenden eines Bildes an einer oder mehreren Kanten, etwa damit ein Produktfoto nahtlos in die Hintergrundfarbe der Seite übergeht, statt mit einer sichtbaren Kante abzuschließen. Ein linearer Gradient, der von deckendem Schwarz zu transparent verläuft, reicht dafür bereits aus und lässt sich ohne zusätzliches Bildmaterial, ohne Photoshop-Export und ohne zusätzliche DOM-Elemente direkt in CSS umsetzen.

Für einen Übergang an mehreren Kanten gleichzeitig, etwa oben und unten wie bei einem endlos wirkenden Karussell, lassen sich zwei Gradienten in einer mask-image-Deklaration kombinieren, indem sie kommagetrennt aufgelistet und über mask-composite miteinander verrechnet werden. Diese Technik ersetzt zuverlässig ältere Lösungen mit halbtransparenten Overlay-Divs, die zusätzliches Markup und zusätzliche Stacking-Context-Komplexität in ein Layout gebracht haben, das eigentlich nur eine weiche Kante brauchte.

/* Fade an allen vier Kanten eines Karussells */
.fade-carousel {
  mask-image:
    linear-gradient(to right, transparent, black 10%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  mask-composite: intersect;
}

5. mask-image vs. clip-path: harte Kanten gegen weiche Verläufe

clip-path definiert eine geometrische Form, meist über Polygone, Kreise oder Ellipsen, und jeder Pixel innerhalb dieser Form ist entweder vollständig sichtbar oder vollständig unsichtbar. Das ergibt scharfe, präzise Kanten, eignet sich hervorragend für geometrische Layouts wie schräg abgeschnittene Sections und ist rechnerisch günstig, weil der Browser nur eine Pfadberechnung durchführen muss, keine pixelweise Deckkraftberechnung.

mask-image dagegen kennt beliebig viele Zwischenstufen an Deckkraft und eignet sich deshalb für alles, was weich, organisch oder fotografisch wirken soll. Die Faustregel für die Praxis: Wer eine gerade oder leicht geschwungene Kante braucht, greift zu clip-path, wer einen Verlauf, eine Textur-basierte Aussparung oder eine ausfransende Kontur braucht, greift zu mask-image. Beide Eigenschaften lassen sich außerdem gleichzeitig auf ein Element anwenden, wenn sowohl eine harte äußere Form als auch ein weicher innerer Verlauf gewünscht ist.

6. Mehrere Masken kombinieren: mask-composite und mask-mode im Zusammenspiel

Sobald mehr als eine Maskenquelle im Spiel ist, bestimmt mask-composite, wie die einzelnen Masken miteinander verrechnet werden: add vereinigt die sichtbaren Bereiche, subtract entfernt eine Maske aus einer anderen, intersect lässt nur den gemeinsamen sichtbaren Bereich übrig, und exclude zeigt nur die Bereiche, die sich nicht überlappen. Diese vier Modi entsprechen exakt den klassischen Boolean-Operationen aus der Vektorgrafik und erlauben komplexe Formen, ohne eine einzige zusätzliche SVG-Datei anzulegen.

Ein praktisches Beispiel ist ein Ring, der aus zwei überlagerten Kreisen entsteht: Ein großer, deckender Kreis als erste Maske und ein kleinerer, ebenfalls deckender Kreis als zweite Maske mit mask-composite: exclude ergeben zusammen eine ringförmige Aussparung, ganz ohne border-radius-Trickserei oder ein zusätzliches Pseudo-Element. Wichtig dabei ist, dass jede Maskenquelle ihren eigenen mask-mode erhalten kann, falls einige Quellen Gradienten und andere Bilddateien mit Alphakanal sind.

/* Ringform aus zwei ueberlagerten Kreis-Masken */
.ring-mask {
  mask-image:
    radial-gradient(circle, black 0 100%),
    radial-gradient(circle, black 0 60%);
  mask-composite: exclude;
}

7. Browser-Unterstützung, Präfixe und robuste Fallback-Strategien

Alle aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützen die ungeprefixte mask-image-Eigenschaft mittlerweile zuverlässig, doch Safari verlangt für einige der zusammengesetzten Eigenschaften wie mask-composite weiterhin die -webkit-Variante mit teils abweichenden Wertenamen. Ein robustes Setup deklariert deshalb zunächst die präfixierte Variante und direkt danach die standardisierte, sodass moderne Browser die zweite Deklaration verwenden und ältere WebKit-Versionen bei der ersten bleiben.

Für Browser, die mask-image überhaupt nicht unterstützen, sollte das Element ohne Maske trotzdem funktional und lesbar bleiben, etwa indem die Maske nur eine dekorative Kante betrifft und keine für den Inhalt notwendige Information verbirgt. Eine @supports-Abfrage macht diese Absicherung explizit: Der unmaskierte Zustand ist die Grundlage, die Maske ist eine progressive Verbesserung obendrauf, niemals eine Voraussetzung dafür, dass Inhalte überhaupt sichtbar sind.

.fade-edge {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
  mask-image: linear-gradient(to bottom, black 70%, transparent);
}

@supports not (mask-image: linear-gradient(black, transparent)) {
  .fade-edge {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

8. Performance und Rendering: worauf bei komplexen Masken zu achten ist

Eine CSS-Maske zwingt den Browser dazu, das Element in einer separaten Compositing-Ebene zu rendern, weil die Deckkraft pro Pixel neu berechnet werden muss, statt einfach das fertige Element auf den Bildschirm zu kopieren. Bei einer einzelnen, statischen Maske auf einem Hero-Bild ist dieser Zusatzaufwand vernachlässigbar, doch sobald viele Elemente gleichzeitig maskiert werden oder die Maske selbst animiert wird, etwa über eine sich bewegende mask-position, steigt die Rendering-Last spürbar.

Für Animationen empfiehlt sich deshalb, die Maskengröße und -form möglichst konstant zu halten und stattdessen nur die Position zu verschieben, weil das dem Browser erlaubt, die Maske einmal zu berechnen und anschließend nur zu verschieben statt neu zu rechnen. Wer viele gleichartige Elemente maskiert, etwa eine ganze Produktkachel-Grid, sollte außerdem prüfen, ob eine einzige, wiederverwendete Maskendatei per URL-Referenz genügt, statt für jedes Element einen individuellen Inline-Gradient zu erzeugen, der vom Browser jedes Mal neu geparst werden muss.

9. Praxis-Einsatz im Shop: Produktbilder, Hero-Sections und Icon-Systeme

Im E-Commerce-Kontext eignet sich mask-image besonders für drei wiederkehrende Aufgaben: weich auslaufende Produktbilder auf Kategorieseiten, organisch geformte Hero-Flächen auf der Startseite, die sich vom klassischen Rechteck abheben, und ein konsistentes Icon-System, das aus einer einzigen SVG-Sprite-Datei per Maske eingefärbt wird, statt für jede Farbvariante ein eigenes SVG zu exportieren. Letzteres spart insbesondere bei Icons, die je nach Theme oder Store-View eine andere Akzentfarbe brauchen, erheblichen Pflegeaufwand.

Bei der Umsetzung in einem Hyvä-Theme lässt sich mask-image problemlos über Tailwind-Utility-Klassen oder direkt im CSS-Layer einbinden, ohne dass zusätzliches JavaScript nötig wäre. Wichtig ist dabei nur, die Maske als rein dekoratives Element zu behandeln und sicherzustellen, dass der zugrunde liegende Inhalt, etwa der Produktname oder Alt-Text eines Bildes, unabhängig von der Maske für Screenreader und Suchmaschinen vollständig erhalten bleibt.

10. Zusammenfassung

11. FAQ: mask-image in CSS: Das Wichtigste auf einen Blick