Transparente Verläufe in CSS: Ausblendungen, Overlays und Scrims

Um einen CSS-Verlauf transparent zu machen, gib einem seiner Stopps eine Farbe mit Alpha null: linear-gradient(to bottom, #7c3aed, transparent) lässt Violett ins Nichts auslaufen, sodass alles darunter durchscheint. Dieselbe Idee nutzt du für Ausblendungen am Textende, dunkle Scrims hinter Bildunterschriften und farbige Overlays auf Fotos. Um den Inhalt eines Elements statt seines Hintergrunds auszublenden, nutze stattdessen mask-image mit einem Verlauf.

Wege, eine transparente Farbe zu schreiben

Warum Ausblendungen früher grau wurden

Das Schlüsselwort transparent ist Schwarz mit Alpha null. Frühe Browser mischten die Rot-, Grün- und Blaukanäle und den Alphakanal getrennt, sodass ein Übergang von Weiß zu transparent unterwegs durch halbtransparentes Grau lief. Deshalb bestehen ältere Tutorials auf rgba(255, 255, 255, 0).

Die Spezifikation verlangt jetzt vormultipliziertes Alpha: Jede Farbe wird vor dem Mischen nach ihrer Deckkraft gewichtet, sodass ein völlig transparenter Stopp überhaupt keine Farbe beiträgt. Jeder aktuelle Browser macht das so. Die passende Farbe mit Alpha null zu schreiben ist trotzdem eine harmlose Gewohnheit und hält dich in E-Mail-Clients und alten WebViews auf der sicheren Seite.

Wo die Ausblendung endet, zählt so viel wie ihre Farben. Ein Stopp bei 70 Prozent beendet die Ausblendung früh und lässt den Rest der Box völlig klar, ideal für eine Tönung, die nur eine Kante berühren soll. Zwei Stopps an derselben Position ergeben einen harten Schnitt von Farbe zu nichts, nützlich für halb gefüllte Balken und geteilte Hintergründe. Stopp-Positionen erklärt CSS linear-gradient.

Inhalte mit mask-image ausblenden

Ein Hintergrundverlauf liegt hinter dem Inhalt und kann daher keinen Text, keine Bilder und keine scrollende Liste ausblenden. Eine Maske kann das. Mit mask-image halten deckende Teile des Verlaufs das Element sichtbar, transparente Teile verbergen es. Die Farbe der Maske ist egal, nur ihr Alpha zählt.

/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}

Die alte Alternative war ein weißer Verlauf über dem Inhalt. Er bricht, sobald die Seite nicht weiß ist, etwa im Dark Mode, und er blockiert Klicks, wenn du pointer-events: none vergisst. Eine Maske hat keines dieser Probleme.

Scrims: transparente Verläufe für Text

Ein Scrim dunkelt einen Teil eines Bildes ab, damit Text darauf lesbar ist, und läuft ins völlig Transparente aus, damit der Rest des Fotos hell bleibt. Ein Übergang mit zwei Stopps funktioniert, aber seine gerade Rampe hinterlässt eine sichtbare Linie, wo das Abdunkeln endet. Mehr Stopps, weich auslaufend verteilt, verbergen diese Kante.

.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}

Töne den Scrim mit einer tiefen Version der Fotofarbe statt reinem Schwarz, und er wirkt wie ein Teil des Bildes. Auf einem warmen Sonnenuntergangsfoto sinkt ein tiefes Braun wie rgb(41 20 8 / 0.75) ins Bild ein, wo Schwarz wie ein aufgelegter Filter aussähe. Verlaufs-Overlays in CSS behandelt Farbwaschungen und Blend Modes, und Text über Bildern die Platzierung.

Transparente Löcher und Spotlights

Dreh die Idee um: in der Mitte transparent, außen dunkel. Ein radialer Verlauf über einer Seite oder einem Bild lässt einen Bereich beleuchtet und dämpft alles andere leise, passend für Onboarding-Tipps, Produktnahaufnahmen und Folien.

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}

Für Social Posts und Druck musst du Scrims selten von Hand bauen. In Gradiently macht der Mark selbst Platz für deine Worte und vertieft oder hebt die Farben nahe den Buchstaben, ohne Overlay-Ebene, die du für jede Größe abstimmen musst.