CSS mask

mask blendet Teile eines Elements aus – ähnlich wie clip-path. Im Unterschied zu clip-path kann mask jedoch Gradients, Bilder und SVG-Masken verwenden. Dadurch entstehen weiche Übergänge, Fade-Effekte und teiltransparente Bereiche, die mit clip-path nicht möglich sind.

Typische Einsatzgebiete

• Hero-Bilder weich ausblenden
• Fade-Effekte für Texte und Bilder
• Bildmasken mit Gradients oder SVG
• Weiche Übergänge und transparente Bereiche

---

mask vs. clip-path

• clip-pathNur harte Kanten – ein Pixel ist entweder sichtbar oder komplett unsichtbar
• maskErlaubt weiche Übergänge – Grauwerte bzw. Transparenz der Maske steuern die Deckkraft

---

Mask-Eigenschaften

• mask-imageDefiniert die Maske – als Gradient, Bild oder SVG
• mask-sizeGrösse der Maske, wie background-size
• mask-positionPosition der Maske, wie background-position
• mask-repeatWiederholung der Maske, wie background-repeat
• mask-clipBegrenzt die Maske auf border-box, padding-box oder content-box
• mask-originBezugspunkt für mask-position (Standard: border-box)
• mask-modeHelligkeit (luminance) oder Alphakanal (alpha) auswerten
• mask-compositeVerrechnet mehrere Masken (add, subtract, intersect, exclude)
• -webkit-mask-*Safari benötigt die Eigenschaften zusätzlich mit Präfix

---

mask-image

mask-image definiert die Maske eines Elements. Als Maske können Gradients, Bilder oder SVG-Dateien verwendet werden. Schwarze Bereiche bleiben sichtbar, transparente Bereiche werden ausgeblendet und Grauwerte erzeugen weiche Übergänge.

Harte und weiche Masken

Bei einer Maske gilt: schwarz (bzw. transparent) blendet aus, weiss (bzw. opak) zeigt an – alles dazwischen wird teiltransparent.

.hart {
    mask-image: linear-gradient(black 50%, transparent 50%);
    /* harter Schnitt bei 50% – wie clip-path */
}

.weich {
    mask-image: linear-gradient(black, transparent);
    /* fliessender Verlauf von sichtbar zu unsichtbar */
}

Wichtig: Safari braucht weiterhin das Präfix -webkit-mask-image zusätzlich zur unpräfixten Version.

---

Bild als Maske: Foto-Vignette

Ein radialer Verlauf als Maske erzeugt einen klassischen Vignette-Effekt – das Foto verblasst weich zu den Rändern hin, statt hart abgeschnitten zu werden.

img {
    mask-image: radial-gradient(circle, black 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 55%, transparent 100%);
}

---

Text-Fade (Read-more-Effekt)

Ein häufiger Praxisfall: ein Textblock mit fester Höhe, der nicht hart abgeschnitten, sondern weich ausgeblendet wird – z.B. bevor ein "Weiterlesen"-Link folgt.

.text-fade {
    height: 80px;
    overflow: hidden;
    mask-image: linear-gradient(black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(black 40%, transparent 100%);
}

---

Hero-Fade: Bild läuft weich aus

Ein sehr typischer Einsatz für mask: Ein grosses Bild endet nicht mit einer harten Kante, sondern läuft weich in die Section-Farbe aus. Das wirkt bei Hero-Bildern, Landingpages, Portfolios oder Reisewebseiten deutlich ruhiger.

.hero img {
    width: 100%;
    display: block;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(black 65%, transparent 100%);
    mask-image: linear-gradient(black 65%, transparent 100%);
}

---

Gallery-Fade: Seiten weich ausblenden

Bei horizontal scrollbaren Galerien können die äusseren Bereiche weich auslaufen. So wirkt die Galerie weniger hart begrenzt und zeigt gleichzeitig: Hier geht es seitlich weiter.

.gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

---

Scroll-Fade: Inhalt läuft oben und unten aus

Auch scrollbare Textbereiche profitieren von einer Maske. Statt oben und unten hart abzuschneiden, zeigt der Verlauf subtil, dass der Inhalt weitergeht.

.scroll-fade {
    height: 170px;
    overflow: auto;
    -webkit-mask-image: linear-gradient(
        transparent,
        black 14%,
        black 86%,
        transparent
    );
    mask-image: linear-gradient(
        transparent,
        black 14%,
        black 86%,
        transparent
    );
}

---

mask-size

mask-size legt fest, wie gross die Maske dargestellt wird – genau wie background-size. Häufige Werte sind contain (Maske vollständig einpassen, ohne sie zu verzerren), cover (Maske füllt das Element komplett aus) oder feste Masse wie 100px 100px.

• autoIntrinsische Grösse der Maske (Standard)
• containMaske vollständig einpassen, Seitenverhältnis bleibt erhalten
• coverMaske füllt das Element komplett aus, kann dabei beschnitten werden
• 100px 50px / 50% 100%Feste Breite und Höhe

SVG oder Bild als Formmaske

.element {
    mask-image: url('stern.svg');
    mask-size: contain;
}

---

mask-repeat

mask-repeat bestimmt, ob eine kleiner bemessene Maske (über mask-size) gekachelt wiederholt wird – genau wie background-repeat. Ohne Wiederholung bleibt nur die eine Kachel übrig, der Rest des Elements wird ausgeblendet.

• repeatMaske wird horizontal und vertikal wiederholt (Standard)
• repeat-xWiederholung nur horizontal
• repeat-yWiederholung nur vertikal
• no-repeatMaske wird nur einmal angezeigt

.element {
    mask-image: radial-gradient(circle, black 40%, transparent 41%);
    mask-size: 40px 40px; /* kleine Kachel */
}

.repeat    { mask-repeat: repeat; }    /* Punktmuster über die ganze Fläche */
.no-repeat { mask-repeat: no-repeat; } /* nur ein Punkt oben links, Rest ausgeblendet */

Achtung: Bei no-repeat bleibt nicht etwa die restliche Fläche voll sichtbar – ausserhalb der einen Kachel gibt es keine Maskeninformation, also wird dort alles ausgeblendet.

---

mask-position

mask-position legt fest, wo die Maske innerhalb des Elements sitzt – genau wie background-position. Zusammen mit mask-size und mask-repeat: no-repeat lässt sich eine einzelne kleine Maske gezielt platzieren.

• top / right / bottom / left / centerSchlüsselwörter, auch kombinierbar (z.B. bottom right)
• 50% 50%Prozentwerte – 0% 0% (Standard) ist oben links, 50% 50% die Mitte
• 20px 10pxFeste Längenangaben
• right 20px bottom 10px4-Werte-Syntax mit Kantenversatz von einer bestimmten Seite aus

.element {
    mask-image: radial-gradient(circle, black 40%, transparent 41%);
    mask-size: 80px 80px;
    mask-repeat: no-repeat;
}

.a { mask-position: top left; }
.b { mask-position: center; }
.c { mask-position: bottom right; }

---

mask-clip & mask-origin

mask-clip und mask-origin gehören eng zusammen, weil beide denselben Bezugs-Kasten verwenden (Border-, Padding- oder Content-Box) – nur für unterschiedliche Zwecke: mask-clip begrenzt die Sichtbarkeit der Maske, mask-origin legt den Nullpunkt für mask-position fest. Beide funktionieren analog zu background-clip und background-origin.

mask-clip

Bei mask-clip: content-box wird alles ausserhalb des Inhalts abgeschnitten – unabhängig davon, was der Gradient eigentlich vorsieht.

• border-boxMaske bezieht sich auf Inhalt, Padding und Border (Standard)
• padding-boxMaske bezieht sich auf Inhalt und Padding
• content-boxMaske bezieht sich nur auf den Inhaltsbereich

.box {
    padding: 20px;
    border: 15px dashed rgba(0, 0, 0, 0.4);
    mask-image: radial-gradient(circle, black 60%, transparent 100%);
}

.border-box  { mask-clip: border-box; }  /* Maske reicht bis unter den Border */
.content-box { mask-clip: content-box; } /* Border & Padding komplett ausgeblendet */

mask-origin

mask-origin legt fest, von wo aus mask-position gezählt wird – der Standardwert ist hier allerdings border-box, nicht padding-box wie bei background-origin.

• border-boxZählung ab der Aussenkante des Borders (Standard)
• padding-boxZählung ab der Innenkante des Borders
• content-boxZählung ab der Innenkante des Paddings

.box {
    padding: 20px;
    border: 15px dashed rgba(0, 0, 0, 0.4);
    mask-image: radial-gradient(circle, black 40%, transparent 41%);
    mask-size: 40px 40px;
    mask-repeat: no-repeat;
    mask-position: top left; /* immer "oben links" - aber wo genau? */
}

.a { mask-origin: border-box; }  /* oben links der Border-Aussenkante */
.b { mask-origin: content-box; } /* oben links des Inhalts, spürbar weiter innen */

Bei border-box sitzt der Kreis direkt in der Ecke des Borders, bei content-box rutscht er sichtbar weiter nach innen – gleiche mask-position, unterschiedlicher Nullpunkt.

---

mask-mode

mask-mode legt fest, ob die Maske anhand ihrer Helligkeit (luminance) oder ihres Alphakanals (alpha) ausgewertet wird. Relevant wird der Unterschied erst, wenn die Maske Transparenz oder unterschiedliche Helligkeiten enthält.

• luminanceHelligkeit der Maske entscheidet über die Deckkraft (Standard)
• alphaNur der Transparenzgrad (Alphakanal) der Maske entscheidet über die Deckkraft

.element {
    mask-image: linear-gradient(black, white); /* beide Farben 100% opak */
}

.luminance { mask-mode: luminance; } /* schwarz = unsichtbar, weiss = sichtbar */
.alpha     { mask-mode: alpha; }     /* Alpha ist bei beiden Farben 100% -> keine Wirkung! */

Der Haken: Bei alpha bleibt die Box komplett sichtbar, weil Schwarz und Weiss beide voll deckend sind (Alpha = 100%) – nur ein Verlauf mit echter Transparenz (z.B. black, transparent) hätte im Alpha-Modus einen Effekt.

---

mask-composite

Wie bei background lassen sich mehrere Masken kommagetrennt als Ebenen übereinanderlegen – jede mit eigener Grösse, Position und Wiederholung. Mit mask-composite lassen sich diese Ebenen miteinander verrechnen – z.B. um aus zwei Kreisen ein Loch auszuschneiden (wie bei einer Brille).

• addMasken werden addiert (Standard)
• subtractZweite Maske wird von der ersten abgezogen
• intersectNur der gemeinsame Bereich bleibt sichtbar
• excludeNur der nicht-überlappende Bereich bleibt sichtbar

.element {
    mask-image:
        radial-gradient(circle at 35% 50%, black 40%, transparent 41%),
        radial-gradient(circle at 65% 50%, black 40%, transparent 41%);
    mask-composite: exclude; /* Standard-Syntax */
    -webkit-mask-composite: destination-out; /* Safari-Syntax, andere Werte! */
}

Achtung: Die Werte von -webkit-mask-composite (z.B. destination-out) folgen einer älteren Syntax und stimmen nicht mit mask-composite überein – beide Zeilen sind nötig, aber mit unterschiedlichen Werten.

---

Selten gebraucht: mask-border ist das Pendant zu border-image, nur für Masken am Rand eines Elements. Und das SVG-<mask>-Element ist eine zweite, unabhängige Möglichkeit, Masken zu definieren – direkt in SVG statt in CSS, referenziert über mask: url(#meine-maske). Für die allermeisten Anwendungsfälle reicht aber mask-image aus dieser Lektion völlig.

---

Browser-Kompatibilität

• mask-image mit Gradients/Bildern – Alle modernen Browser
• Safari – benötigt weiterhin -webkit-mask-* zusätzlich zu den unpräfixten Eigenschaften
• mask-composite – Safari nutzt eine andere Werte-Syntax über -webkit-mask-composite

---

Cheat Sheet

• mask-imageGradient, Bild oder SVG als Maske
• mask-sizeGrösse der Maske
• mask-repeatWiederholung der Maske
• mask-positionPosition der Maske
• mask-clipSichtbaren Bereich begrenzen
• mask-originBezugspunkt für mask-position
• mask-modeluminance oder alpha
• mask-compositeMehrere Masken verrechnen
• -webkit-mask-*Safari-Präfix

---

Kurz gesagt

• mask blendet Teile eines Elements hart oder weich aus.
• Im Unterschied zu clip-path erlaubt mask weiche Übergänge über Gradients, Bilder oder SVG.
• Schwarz/transparent blendet aus, Weiss/opak zeigt an – dazwischen wird teiltransparent.
• Klassische Einsätze: Hero-Fades, Gallery-Fades, Text-Fade-Effekte, Foto-Vignetten und weiche Bildränder.
• mask-size, mask-repeat und mask-position steuern Grösse, Wiederholung und Position der Maske.
• mask-origin (Bezugspunkt für mask-position) ist standardmässig border-box – anders als bei background-origin, wo padding-box Standard ist.
• mask-mode: alpha wirkt nur bei Masken mit echter Transparenz – bei voll deckenden Farben passiert nichts.
• mask-composite verrechnet mehrere Masken (add, subtract, intersect, exclude).
• Safari braucht weiterhin -webkit-mask-* zusätzlich – bei mask-composite sogar mit anderer Werte-Syntax.

---

Für harte, geometrische Formen ist clip-path die passende CSS-Eigenschaft.

---