CSS-Farbverläufe für Hintergründe

Was ist ein CSS-Verlaufshintergrund?

Ein CSS-Verlaufshintergrund ist ein Bild, das mithilfe nativer CSS-Funktionen im Code erzeugt wird. Eine externe Bilddatei ist dafür nicht erforderlich.

Verläufe werden der Eigenschaft background-image zugewiesen, nicht der Eigenschaft background-color. Der Browser rendert sie, indem er Farbwerte über eine definierte Achse, Form oder einen Winkel hinweg interpoliert, wodurch ein fließender Farbübergang vollständig im Code erzeugt wird.

Da der Browser den Farbverlauf zum Zeitpunkt des Zeichnens erzeugt, wird keine HTTP-Anforderung durchgeführt – im Gegensatz zu Rasterhintergründen, bei denen der Browser eine separate Datei abrufen muss, bevor das Rendering abgeschlossen werden kann.

CSS-Verläufe haben keine intrinsischen Dimensionen. Sie skalieren, um das Element zu füllen, auf das sie angewendet werden, was sie in responsivem Design (EN)-Layouts natürlich fließend macht.

Stripe ist ein bekanntes Beispiel für diesen Ansatz in der Produktion. Die Helden-Sektionen des Unternehmens verwenden mehrschichtige linear-gradient()-Aufrufe auf großen Containern, wodurch externe Bildanforderungen vollständig vermieden werden und gleichzeitig ein gestochen scharfes Rendering über alle Bildschirmdichten beibehalten wird.

---

Was sind die Arten von CSS-Verläufen?

CSS bietet 4 native Verlaufsfunktionen: linear-gradient(), radial-gradient(), conic-gradient() und wiederholende Varianten von jeder.

Jeder Typ verwendet ein anderes geometrisches Modell für die Farbverteilung. Wenn Sie für einen Layoutkontext den falschen Typ auswählen, entstehen visuelle Artefakte oder unbeabsichtigte Überblendungen, die nicht allein durch Anpassungen der Farbanschläge korrigiert werden können.

CSS-Konische Verläufe tragen eine 92/100 Cross-Browser-Kompatibilitätsbewertung gemäß LambdaTest-Daten, mit voller Unterstützung für Chrome, Firefox, Safari 12.1+, und Edge 79+. IE 11 hat keine Unterstützung für conic-gradient().

Linear Gradient

Achsenbasierte Farbverteilung:

linear-gradient() übergeht Farben entlang einer geraden Linie in einem definierten Winkel oder einer definierten Richtung.

• Die Standardrichtung ist to bottom (180 Grad), wenn kein Richtungsargument angegeben wird.

• Akzeptiert deg, turn und rad Winkeleinheiten zusätzlich zu Schlüsselwortrichtungen wie to right

• Harte Anschläge, die durch die Platzierung von zwei Anschlägen an derselben Position erzeugt werden, erzeugen eine scharfe Kante ohne Überblendung

Radialer Farbverlauf

radial-gradient() strahlt Farbe von einem Mittelpunkt aus nach außen.

Form und Größe sind unabhängig voneinander konfigurierbar:

• circle behält gleiche Radien auf beiden Achsen bei; ellipse skaliert auf Elementabmessungen (Standard)

• Größenschlüsselwörter: closest-side, farthest-side, closest-corner, farthest-corner

• Zentrale Position verwendet die gleiche Syntax wie background-position

Konischer Farbverlauf

Farben werden in definierten Winkeln um einen Mittelpunkt herum und nicht entlang einer Achse geschwenkt.

conic-gradient() war der letzte der vier Typen, der vollständige Browserunterstützung erhielt und in Chrome 69, Firefox 83 und Safari 12.1 landete. Es akzeptiert Winkelwerte in deg, turn und grad Einheiten an jedem Farbanschlag — ein Unterschied zu den prozentualen Stopps, die in linearen und radialen Varianten verwendet werden.

Kreisdiagramme und Farbräder sind die beiden häufigsten Anwendungsfälle, die beide ohne JavaScript oder SVG erreichbar sind.

Wiederholen von Verläufen

Das Kachelverhalten ist der Hauptunterschied zu Standard-Verlaufsfunktionen.

Wiederholende Varianten (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) kacheln das definierte Muster über das Element, anstatt eine einzelne Verlaufsinstanz zu strecken, um es zu füllen.

Sehr kleine Wiederholungsintervalle, zum Beispiel ein repeating-linear-gradient, der in 2px-Intervallen festgelegt ist, können auf Displays mit hoher DPI-Auflösung zu Aliasing-Artefakten führen. Durch Tests auf physischen Geräten oder die Verwendung der Chrome DevTools-Geräteemulation werden diese vor der Produktion erfasst.

---

Wie funktioniert die CSS-Syntax für lineare Verläufe?

Die linear-gradient() Syntax folgt einer konsistenten 3-teiligen Struktur: eine optionale Richtung, mindestens 2 Farbstopps und optionale Positionswerte für jeden Stopp.

linear-gradient([direction], color-stop-1, color-stop-2, ...) <code>.

Richtungs- und Winkelwerte

Direction akzeptiert 2 Formate:

• Schlüsselwort Richtungen: to right, to bottom, to top left und ähnliche Kompass-Kombinationen

• Explizite Winkel: 45deg, 0.5turn, 1.57rad

Wenn keine Richtung angegeben wird, setzt der Browser standardmäßig to bottom ein (entspricht 180deg). Ein Wert von 0deg zeigt nach oben, und Gradwerte steigen im Uhrzeigersinn an — was das Gegenteil der üblichen trigonometrischen Konvention ist. Gut zu wissen, bevor Sie 10 Minuten damit verbringen, sich zu fragen, warum 90deg nicht nach oben zeigt.

Syntax für Farbstopp

Farbstopps folgen dem Muster color position, zum Beispiel red 25% oder #3a86ff 100px.

• Positionseinheiten: Prozent, Pixel, em oder rem

• Stops ohne Position werden gleichmäßig auf den vorherigen und nächsten definierten Stop verteilt

• 2 Blendenstufen an der gleichen Position (z. B. red 50%, blue 50%) erzeugen eine harte Kante ohne graduelle Überblendung

Hinweise zur Farbe

Ein Farbhinweis verschiebt den Mittelpunkt des Übergangs zwischen 2 Farbstopps.

Die Syntax platziert einen eigenständigen Positionswert zwischen zwei Stopps: red, 20%, blue. Dadurch wird der Browser angewiesen, den Mittelpunkt der Rot-Blau-Mischung bei der 20-%-Marke und nicht bei der standardmäßigen 50-%-Marke zu erreichen. Nützlich, um einen Farbverlauf scheinbar zu einer Seite „ziehen“ zu lassen, ohne die Stopppositionen anzupassen.

---

Wie funktioniert CSS Radial Gradient Syntax?

radial-gradient() erzeugt eine Farbe, die sich von einem Mittelpunkt aus nach außen ausbreitet, wobei Form und Größe unabhängig voneinander konfiguriert werden können.

radial-gradient([shape] [size] at [position], color-stop-1, color-stop-2, ...) <code>.

Form- und Größenparameter

Das Verhalten von Ellipsen und Kreisen unterscheidet sich bei nicht-quadratischen Elementen:

Ein ellipse-Verlauf dehnt sich, um den Breiten- und Höhenverhältnissen des Elements zu entsprechen. Ein circle-Verlauf behält unabhängig von den Elementabmessungen gleiche Radien auf beiden Achsen bei, was bedeutet, dass die kreisförmige Form außerhalb der Mitte erscheint, wenn das Element nicht quadratisch ist.

Größenschlüsselwörter in der Praxis

farthest-corner ist der Standard und erzeugt einen Verlauf, der sich erstreckt, bis er die entfernteste Ecke des Elements erreicht und den Hintergrund vollständig ausfüllt.

closest-side stoppt den Farbverlauf an der nächstgelegenen Kante. Dadurch entsteht eine sichtbare harte Kante an den anderen Seiten des Elements, was eher eine bewusste Designentscheidung als ein Wiedergabefehler ist. Jedes Größenschlüsselwort führt zu einem optisch unterschiedlichen Ergebnis für dasselbe Element – ​​es handelt sich nicht um stilistische Variationen derselben Ausgabe.

---

Wie funktioniert die CSS-Syntax für konische Verläufe?

conic-gradient() verteilt Farben eckig um einen Mittelpunkt herum, so wie sich die Zeiger auf einem Zifferblatt bewegen.

conic-gradient([from angle] [at position], color-stop-1, color-stop-2, ...) <code>.

Der Standard-Anfangswinkel ist 0deg (oben im Element). Die Standardmitte ist 50% 50%. Beide können unabhängig voneinander geändert werden.

Winkelbasierte Farbstopps

Farbstopps in conic-gradient() akzeptieren neben Prozentwerten auch Winkelwerte.

• conic-gradient(red 0deg, blue 180deg, red 360deg) erzeugt einen halb-roten, halb-blauen Sweep

• conic-gradient(red 0%, blue 50%, red 100%) erzeugt dasselbe Ergebnis unter Verwendung von Prozentsätzen

• Mischen von Winkeleinheiten und Prozenten in derselben Deklaration ist gültig

Kreisdiagramm-Produktion:

Ein 3-Segment-Kreisdiagramm benötigt kein JavaScript. Die Syntax conic-gradient(red 120deg, blue 240deg, green 360deg) teilt den Kreis in 3 gleiche Sektoren. Das Hinzufügen von border-radius: 50% zum Element rundet es in einen Kreis ab.

Positionskontrolle

Das at Schlüsselwort legt den Mittelpunkt des Sweeps fest und verwendet die gleiche Positionssyntax wie radial-gradient() und background-position.

Das Verschieben der Mitte weg von 50% 50% erzeugt asymmetrische Winkelverteilungen. Ein konischer Verlauf mit at 0 0 setzt das Zentrum in der oberen linken Ecke des Elements, wodurch ein Viertelkreis über die Oberfläche des Elements erzeugt wird. Nützlich für Ecken-Glüheffekte in Kartendesigns.

---

Was sind CSS-Farbverlaufs-Stopps und wie funktionieren sie?

Ein Farbanschlag definiert, wo eine bestimmte Farbe innerhalb des Verlaufs erscheint und wie der Browser benachbarte Anschläge interpoliert.

Farbstop-Syntax: color position — zum Beispiel #3a86ff 25% oder rgba(0,0,0,0.5) 100px.

Stop Positionierung und Verteilung

3 Verhaltensweisen steuern die Stopp-Platzierung:

• Stopps mit expliziten Positionen werden an genau diesem Punkt im Verlauf gerendert

• Stops ohne Positionen werden automatisch gleichmäßig zwischen dem vorherigen und dem nächsten definierten Stop verteilt

• 2 Anschläge an identischen Positionen erzeugen eine harte Kante ohne stufenlosen Übergang zwischen ihnen

Das Stapeln von 3 oder mehr Stopps in Folge erzeugt Multiband-Verläufe. Das Hintergrundmuster repeating-linear-gradient(45deg, #eee 0px, #eee 10px, white 10px, white 20px) erzeugt einen Streifeneffekt mit 4 Stops ohne zusätzliches CSS. CSS-Hintergrundmuster (EN), die auf diese Weise erstellt werden, benötigen keine Bildelemente und werden bei allen Auflösungen scharf gerendert.

Farbinterpolation

Standardmäßig interpolieren Browser zwischen Stopps im sRGB-Farbraum, was bei Übergängen zwischen entgegengesetzten Farbtönen zu schlammigen Mitteltönen führen kann – beispielsweise Rot zu Blau, das durch eine entsättigte Grau-Violett-Zone geht.

Die neuere color-mix()-Syntax und die color()-Funktion erweitern die Interpolationsoptionen, einschließlich des oklch-Farbraums, der wahrnehmungsmäßig gleichmäßige Farbverläufe ohne Entsättigungsartefakte erzeugt. Die Browserunterstützung für die Oklch-Interpolation in Farbverläufen liegt laut State of CSS 2024-Daten bei etwa 88 %.

Farbhinweise (Mittelpunkt-Steuerung)

Ein Farbhinweis ist ein nur positionsbezogener Wert, der zwischen zwei Farbstopps platziert wird und den Mittelpunkt der Mischung verschiebt.

Syntax: red, 30%, blue — der 30% Wert ist der Hinweis, kein Farbstopp. Der Browser erreicht den Mittelpunkt des Rot-Blau-Übergangs bei 30 % anstelle der Standardwerte von 50 %. Diese asymmetrische Beschleunigung zur einen Seite ist ein subtiles Werkzeug. Die meisten Entwickler verpassen es komplett, weil es identisch mit einem Positionswert aussieht, bis Sie verstehen, was es tut.

---

Wie werden mehrere CSS-Verläufe auf einem Element überlagert?

Mehrere CSS-Verläufe werden als kommagetrennte Werte in einer einzelnen background-image-Deklaration gestapelt.

background-image: linear-gradient(...), radial-gradient(...), url('image.jpg');

Der erste deklarierte Wert wird oben gerendert, der letzte unten. Diese Stapelreihenfolge ist das Gegenteil von z-index Verhalten, das Leute beim ersten Mal stolpern lässt.

Anforderungen an die Transparenz

Untere Ebenen werden nur durch die oberen Ebenen hindurch angezeigt, wenn die oberen Ebenen Transparenz enthalten.

• transparent Schlüsselwort löst auf rgba(0,0,0,0) auf — vollständig transparent schwarz

• rgba() und hsla() Werte mit Alpha kleiner als 1 erzeugen partielle Transparenz

• Ein linear-gradient(black, black) oben blockiert alles darunter, unabhängig davon, wie viele Ebenen darunter deklariert sind

Ein übliches Produktionsmuster: background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') überlagert ein Foto mit einem halbtransparenten, dunklen Text, der einen zuverlässigen Textkontrast erzeugt, ohne die Bilddatei zu verändern. Laut WebAIMs 2024 Millionen-Analyse sind 83,6 % der Websites von einem schlechten Farbkontrast betroffen – diese mehrschichtige Farbverlaufs-Overlay-Technik adressiert direkt die häufigste Ursache für diesen Fehler bei bildlastigen Abschnitten.

Pro-Layer-Eigenschaftensteuerung

background-size, background-position und background-repeat akzeptieren kommagetrennte Werte, die jeder Ebene in der Reihenfolge zugeordnet werden.

background-image: linear-gradient(...), url('texture.png');
background-size: cover, 200px 200px;
background-position: center, top left;

Der cover wird auf die Verlaufsebene angewendet; 200px 200px wird auf die Textur angewendet. Diese Ebenenkontrolle macht komplexe CSS-animierte Hintergründe (EN) und mehrschichtige Overlay-Systeme überschaubar, ohne Selektoren zu duplizieren oder Wrapper-Elemente hinzuzufügen.

Verläufe mit Bildern kombinieren

Verläufe und url() Bildreferenzen können in derselben background-image Deklaration koexistieren.

Die Verlaufsebenen werden beim Malen vom Browser generiert, sodass die Kombination mit einer Bildreferenz die Anzahl der HTTP-Anfragen nicht über den einzelnen Bildabruf hinaus erhöht. Die Verlaufsebenen selbst bleiben nullanforderungsfrei.

Wie wirken sich CSS-Verläufe auf die Leistung aus?

CSS-Verläufe werden zum Zeitpunkt des Zeichnens vom Browser generiert. Sie erzeugen null HTTP-Anfragen, im Gegensatz zu Raster-Hintergrundbildern, die einen vollständigen Netzwerk-Rundgang benötigen, bevor der Browser rendern kann.

Allerdings sind Farbverläufe nicht kostenlos. Die Kosten erscheinen in der Rendering-Phase, nicht in der Netzwerkphase.

Kosten für Neumalerei während der Animation

Durch direktes Animieren von Verlaufseigenschaften (Farbwerte, Winkel, Stopppositionen) wird auf jedem Frame ein vollständiges Repaint ausgelöst.

Bei 60 Bildern pro Sekunde läuft das Repaint kontinuierlich. Bei komplexen Verläufen mit vielen Farbstopps oder großen Elementabmessungen verbraucht jedes Repaint messbare CPU-Zeit.

Der richtige Ansatz für animierte Verlaufshintergründe:

• Animieren Sie background-position auf einem Verlauf mit background-size: 400% 400%, anstatt die Farben direkt zu animieren

• Verwenden Sie opacity oder transform auf einem Pseudo-Element, das über einem statischen Verlauf geschichtet ist

• Vermeiden Sie will-change: background-image — es erstellt keine Compositing-Ebene und bietet keinen Leistungsvorteil

Komplexe Verläufe und Rendering-Kosten

Jeder zusätzliche Farbstopp erhöht die Pixelberechnungslast während des Malvorgangs.

Ein Verlauf mit 3 Stufen wird auf demselben großen Element deutlich schneller gerendert als ein Verlauf mit 10 Stufen. Auf Mobilgeräten mit begrenztem GPU-Speicher kann das Wiederholen von Verläufen in sehr kleinen Intervallen (2-4px) sowohl Aliasing-Artefakte als auch eine erhöhte Malzeit verursachen. Tests auf physischen Android-Geräten der unteren Preisklasse erfassen diese Probleme vor der Produktion.

will-change: transform auf einem Pseudo-Element, nicht auf dem Verlauf selbst, erhöht diese Ebene zu einem Composite, ohne die Neuberechnung des Verlaufs in jedem Frame zu erzwingen.

---

Wie werden CSS-Verläufe im Responsive Design verwendet?

CSS-Verläufe werden standardmäßig mit ihrem Container skaliert. Es ist keine background-size: cover Umgehung erforderlich, im Gegensatz zu Rasterbildern, bei denen der Browser ein endliches Pixelraster strecken oder zuschneiden muss.

Responsive Websites haben laut VWO-Daten eine 11% höhere Conversion-Rate als nicht-responsive Entsprechungen. Verlaufshintergründe, die sich fließend an Layoutänderungen anpassen, sind Teil dieses mobile-first-Designs (EN)-Vorteils gegenüber statischen Bildalternativen.

Prozentsatz vs. Pixel-Stop-Positionen

Wie sich Stops bei verschiedenen Bildschirmgrößen verhalten:

• Prozentstopps skalieren mit den gerenderten Abmessungen des Elements an jedem Haltepunkt

• Pixelstopps bleiben fest, unabhängig davon, wie groß oder klein der Container wird

• Das Mischen beider Einheiten in einem Farbverlauf ist gültig und manchmal nützlich: Pixelbasierte harte Stopps können ein Band verankern, während prozentuale Stopps die umgebenden Übergänge übernehmen

Ein Verlauf mit festen Stopps bei 50px und calc(100% - 50px) behält ein Band mit fester Breite in der Mitte eines Elements, unabhängig von der Gesamtbreite des Elements. Dieses Verhalten ist mit Stopps, die nur Prozentangaben enthalten, unmöglich.

Medienabfragen und Verlaufsrichtung

Medienabfragen (EN) können die Verlaufsrichtung, Farbpalette oder den Winkel an bestimmten Haltepunkten ohne zusätzliche Bildelemente ändern.

.hero {
  background-image: linear-gradient(to right, #3a86ff, #8338ec);
}

@media (max-width: 768px) {
  .hero {
    background-image: linear-gradient(to bottom, #3a86ff, #8338ec);
  }
}

Der horizontale Verlauf auf dem Desktop wird auf dem Mobilgerät vertikal. Kein Image-Swap, keine zusätzliche HTTP-Anfrage.

Verlaufs-Overlays auf responsiven Bildern

Um einen halbtransparenten Verlauf über ein Foto zu stapeln, ist background-size: cover sowohl auf der Verlaufsebene als auch auf der Bildebene erforderlich.

Ohne Übereinstimmung der background-size-Werte pro Ebene wird das Bild so skaliert, dass es den Container füllt, die Verlaufsebene jedoch nicht, wodurch die visuelle Ausrichtung zwischen der Überlagerung und dem Foto unterbrochen wird. Jeder background-size, background-position und background-repeat Wert wird seinem entsprechenden Layer in der background-image Deklarationsreihenfolge zugeordnet.

---

Was sind CSS-Verlaufs-Zugangsüberlegungen?

Zu geringer Farbkontrast ist der häufigste Barrierefreiheitsfehler im Web. Laut der WebAIM-Million-Analyse von 2024 betrifft er 83,6 % aller Websites. Farbverläufe sind eine häufige Ursache, weil sich das Kontrastverhältnis über die Verlaufsfläche hinweg ständig ändert.

WCAG 2.1 SC 1.4.3 erfordert ein Mindest-Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (18px+ normal oder 14px+ fett). Bei einem einfarbigen Hintergrund geht eine einzige Kontrastprüfung über das gesamte Element. Bei einem Verlaufshintergrund ist jeder Punkt entlang des Verlaufs ein potenzieller Fehler.

Testen des Kontrasts auf Verlaufshintergründen

Automatisierte Tools erkennen etwa 95% der Kontrastprobleme, aber die verbleibenden 5% mit Verlaufs- und Bildhintergründen erfordern eine manuelle Überprüfung (web-accessibility-checker.com (EN), 2024).

Testansatz für Verlaufshintergründe:

• Identifizieren der hellsten Hintergrundfarbe im Verlaufsbereich

• Führen Sie die Kontrastprüfung zwischen dieser Farbe und der Textfarbe durch

• Wenn der Text am hellsten Punkt durchläuft, wird er an jedem Punkt durchlaufen

Tools, die dies unterstützen: Der TPGi Colour Contrast Analyser (CCA) nimmt Bildschirmpixel direkt ab, einschließlich Verlaufsflächen. Stark in Figma prüft den Kontrast während der Mockup (EN)-Phase, bevor CSS geschrieben wird.

Animierte Verläufe und Bewegungsempfindlichkeit

Vestibuläre Störungen betreffen weltweit mehr als 70 Millionen Menschen, wodurch animierte Hintergründe eher eine echte Barriere als eine kleine Unannehmlichkeit darstellen (CSS-Tricks).

Animierte Verlaufshintergründe müssen die Medienabfrage prefers-reduced-motion berücksichtigen. Jeder gängige Browser – Chrome, Edge, Firefox, Safari und Opera – unterstützt diese Funktion.

@media (prefers-reduced-motion: no-preference) {
  .animated-bg {
    animation: gradientShift 6s ease infinite;
  }
}

Die Animation wird nur ausgeführt, wenn der Benutzer keine reduzierte Bewegung angefordert hat. Dekorative Verlaufsanimationen ohne Informationswert sollten unter dieser Abfrage vollständig entfernt, nicht verlangsamt werden.

Farbe-nur-bedeutung

Farbverläufe, die sich von rot nach grün verschieben, um den Status anzuzeigen (niedrig nach hoch, schlecht nach gut), sind für Benutzer mit Farbsichtsstörungen nicht geeignet.

Verlassen Sie sich nicht allein auf die Farbverläufe, um Bedeutung zu vermitteln. Koppeln Sie den Farbverlauf mit einer Textbeschriftung, einem Symbol oder einem numerischen Wert. Dies gilt für CSS-Fortschrittsbalken (EN)-Komponenten, Heatmaps und jeden Hintergrund, der Daten durch Farbübergang kodiert.

---

Wie funktionieren CSS-Verläufe in browserübergreifenden Umgebungen?

Alle 4 CSS-Verlaufstypen werden in Chrome 69+, Firefox 83+, Edge 79+ und Safari 12.1+ vollständig unterstützt. Das Präfix -webkit- ist für linear-gradient() und radial-gradient() in keinem aktuell gepflegten Browser mehr erforderlich.

Über 30 % der Probleme beim Rendern von Farbverläufen treten in Safari und Internet Explorer auf, wobei konische Farbverläufe im Vergleich zu linearen und radialen Farbverläufen doppelt so häufig fehlschlagen (Bomberbot).

Aktuelle Browser-Unterstützungsmatrix

IE 11 hat keine Unterstützung für conic-gradient(). Für die ca. 0,3-0,5% der Nutzer, die noch IE 11 verwenden (StatCounter 2024), verhindert ein @supports Fallback ein defektes Layout.

Fallback-Strategie mit @supports

@supports testet die Unterstützung von conic-gradient() und liefert einen linear-gradient() Fallback für Umgebungen, in denen das Rendering von Konen fehlschlägt.

.element {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
}

@supports (background: conic-gradient(red, blue)) {
  .element {
    background-image: conic-gradient(from 45deg, #3a86ff, #8338ec);
  }
}

Der lineare Verlauf wird überall gerendert. Der konische Verlauf ersetzt ihn nur in Browsern, die ihn unterstützen. Kein JavaScript, kein User-Agent-Sniffing.

Safari-spezifische Rendering-Hinweise

Safari hatte vor Version 14.1 einen dokumentierten Fehler beim Rendern von radial-gradient()-Ellipsen.

Der Fehler wirkte sich auf die Ellipsenskalierung innerhalb von Flex-Containern aus und erzeugte einen kreisförmigen Verlauf auf Elementen, bei denen eine Ellipse angegeben wurde. Das Testen auf Safari 14.0 und niedriger mit radialen Verläufen innerhalb der Elternelemente display: flex oder display: grid erfasst dies vor dem Versand. Der browserübergreifende Kompatibilitätstest (EN)-Workflow sollte physische iOS-Geräte einschließen, da Safari unter iOS derselben Rendering-Engine wie Safari auf dem Desktop folgt und dieselben versionsspezifischen Fehler erbt.

Häufige Fragen: CSS-Farbverläufe für Hintergründe

Was ist der Unterschied zwischen linearen und radialen Verläufen in CSS?

linear-gradient() verteilt die Farbe entlang einer geraden Achse in einem definierten Winkel.

radial-gradient() verteilt die Farbe von einem Mittelpunkt aus in einer kreisförmigen oder elliptischen Form nach außen.

Der Hauptunterschied liegt in der Geometrie. Verwenden Sie linear für gerichtete Hintergründe, radial für Scheinwerfer- oder Leuchteffekte.

Kann ich einen CSS-Verlauf als Hintergrundfarbe verwenden?

CSS-Verläufe sind Bildwerte und funktionieren nur mit background-image, nicht mit background-color.

Das Setzen von background-color auf eine Verlaufsfunktion erzeugt keine Ausgabe. Die Eigenschaft akzeptiert keine <image>-Datentypen.

Wie füge ich einem CSS-Verlauf Transparenz hinzu?

Verwenden Sie rgba() oder hsla() Farbwerte mit einem Alpha-Wert unter 1 oder das transparent Schlüsselwort.

Beispielsweise erzeugt linear-gradient(rgba(0,0,0,0.5), transparent) eine halbdeckende Überlagerung, die ausgeblendet wird. Dies ist der Standardansatz für den Textkontrast über Heldenbildern.

Wie animiere ich einen CSS-Verlaufshintergrund?

Das direkte Animieren von Verlaufsfarbenwerten löst ein vollständiges Repaint jedes Frames aus, was teuer ist.

Der bessere Ansatz: Animieren Sie background-position auf einem Verlauf mit background-size: 400% 400%. Dadurch wird der Verlauf verschoben, ohne neu berechnet zu werden, wodurch die GPU-Last gering bleibt.

Warum sieht mein Verlauf in der Mitte schlammig oder grau aus?

Dies ist ein Farbinterpolationsproblem im standardmäßigen sRGB-Farbraum.

Übergänge zwischen entgegengesetzten Farbtönen (zum Beispiel von Rot zu Blau) verlaufen durch eine entsättigte Mittelzone. Der Wechsel zur oklch-Interpolation mit der color()-Funktion erzeugt eine wahrnehmbar sauberere Mischung.

Wie schichte ich mehrere Farbverläufe auf einem Element auf?

Liste sie als kommagetrennte Werte auf background-image auf.

Der erste Wert wird oben dargestellt. Untere Ebenen benötigen transparente oder halbtransparente Stopps, um sichtbar zu bleiben. Passen Sie background-size und background-position Werte pro Ebene an, um die Ausrichtung konsistent zu halten.

Wie erstelle ich einen CSS-Verlaufstexteffekt?

Wenden Sie den Farbverlauf auf background-image an und setzen Sie dann background-clip: text und color: transparent auf dasselbe Element.

Die Textform schneidet den Verlauf ab, sodass die Farbe nur durch die Buchstabenformen hindurch sichtbar ist. Browser-Unterstützung ist in allen modernen Browsern ohne Präfixe vollständig.

Funktionieren CSS-Verläufe in allen Browsern?

Lineare und radiale Verläufe werden in allen gepflegten Browsern vollständig unterstützt. Das -webkit--Präfix wird nicht mehr benötigt.

conic-gradient() wird in IE 11 nicht unterstützt. Verwenden Sie @supports, um einen linear-gradient Fallback für Umgebungen bereitzustellen, in denen das konische Rendering fehlschlägt.

Wie erstelle ich einen ganzseitigen CSS-Verlaufshintergrund?

Wenden Sie den Farbverlauf auf das Element body mit min-height: 100vh an.

body {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
  min-height: 100vh;
}

Dies deckt das gesamte Viewport unabhängig von der Inhaltshöhe ab.

Wie stelle ich sicher, dass ein Hintergrund mit Farbverlauf die Anforderungen an den Barrierefreiheitskontrast erfüllt?

WCAG 2.1 erfordert ein 4,5:1-Kontrastverhältnis für normalen Text. Testen Sie bei Verläufen gegen die hellste Hintergrundfarbe im Bereich, nicht gegen einen Durchschnitt.

Wenn der Text an der hellsten Stelle fehlschlägt, fügen Sie eine halbdeckende Überlagerung hinzu oder verschieben Sie den Text in einen Container mit Volltonfarbe.