Warum CSS-Gradients noch unterschätzt werden
Gradients wurden in CSS3 (2009) eingeführt. Die drei Typen lösen grundlegend unterschiedliche visuelle Probleme:
linear-gradient()— gerichtete Übergänge entlang einer geraden Linie.radial-gradient()— Übergänge, die von einem Mittelpunkt nach außen strahlen.conic-gradient()— Übergänge, die wie Uhrzeiger um einen Mittelpunkt schwingen.
Alle drei teilen dieselbe Color-Stop-Syntax, unterscheiden sich aber in ihrer Geometrie.
linear-gradient: das Fundament
Ein linearer Gradient überführt Farben entlang einer geraden Linie. Alle anderen Gradient-Typen bauen auf der Color-Stop-Syntax auf.
Syntax
Das Richtungsargument steuert den Winkel der Gradient-Linie:
| Wert | Winkel | Richtung |
|---|---|---|
| to bottom | 180deg | Oben nach Unten (Standard) |
| to right | 90deg | Links nach Rechts |
| to bottom right | 135deg | Oben-links nach Unten-rechts |
| 45deg | 45deg | Unten-links nach Oben-rechts |
| 0.25turn | 90deg | Links nach Rechts (turn-Einheiten) |
Color Stops: Positionen, Längen und harte Übergänge
Jeder Color Stop akzeptiert eine optionale Position. Harte Übergänge entstehen durch zwei aufeinanderfolgende Stops an derselben Position.
red 20% 40% ist äquivalent zu red 20%, red 40%.
Der Color Hint: Midpoint-Kontrolle
Ein Color Hint zwischen zwei Stops verschiebt den Interpolations-Mittelpunkt.
repeating-linear-gradient
repeating-linear-gradient() kachelt das Gradient-Muster unendlich.
radial-gradient: kreisförmig und elliptisch
Ein radialer Gradient strahlt von einem Mittelpunkt aus und erstellt standardmäßig eine Ellipse.
Syntax
Das erste Argument ist optional. at <Position> verschiebt den Mittelpunkt.
Form und Größen-Schlüsselwörter
Das Größen-Schlüsselwort definiert, wo der Gradient endet:
farthest-corner(Standard) — bis zur entferntesten Ecke.closest-corner— bis zur nächsten Ecke.farthest-side— bis zur entferntesten Seite.closest-side— bis zur nächsten Seite.
Mittelpunkt positionieren
at akzeptiert jeden gültigen CSS-Positionswert.
conic-gradient: der Newcomer
conic-gradient() war der letzte Gradient-Typ mit Browser-Support. Farbübergänge schwingen um einen Mittelpunkt.
Syntax
<code>from <Winkel></code> dreht den Startwinkel. <code>at <Position></code> verschiebt das Zentrum.
Wofür Conic Gradients wirklich gut sind
- Kreisdiagramme — ohne JavaScript.
- Farbräder — von hsl(0deg) bis hsl(360deg).
- Winkelmuster — mit repeating-conic-gradient.
- Fortschrittsringe — mit border-radius: 50%.
repeating-conic-gradient
repeating-conic-gradient() kachelt das Winkelmuster.
Fortgeschrittene Muster
Diese Techniken gehen über die Standard-Gradient-Verwendung hinaus.
Streifenhintergründe
Hart-Stop-Gradients mit background-size erzeugen skalierbare Streifen.
Gradient-Text
background auf Gradient, -webkit-background-clip: text, color: transparent.
Mesh-Gradients
Mehrere radiale Gradients übereinandergestapelt. Nutzen Sie den PixCode Color Palette Generator.
Schachbrett mit conic-gradient
repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) mit background-size.
Direkter Vergleich
| Merkmal | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Richtungsmodell | Gerade Linie | Radial vom Mittelpunkt | Winkelschwingung |
| Repeating-Variante | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| Color-Hint | Ja | Ja | Ja |
| Inset | Nein | Nein | Nein |
| Typische Verwendung | Hintergründe, Buttons | Scheinwerfer, Glows | Diagramme, Räder |
Performance-Überlegungen
CSS-Gradients werden von der GPU gerastert. Einige Muster verursachen Repaints:
Statische Gradients. Gradients als background-image. Repeating Gradients.
Color Stops direkt animieren. Große Flächen mit vielen radialen Gradients. Gradient-Text in kleinen Größen.
Niemals background direkt animieren. Gradient auf Pseudo-Element anwenden, dann opacity oder transform animieren.
Barrierefreiheit und Kontrast
Text über Gradients muss WCAG AA an jedem Punkt erfüllen.
Kontrast am hellsten Punkt testen. Dunkles Overlay: background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%).