CSS-Verläufe
Vollton und Fotos decken viele Hintergründe ab. Manchmal wollen Sie einen weichen Übergang zwischen Farben — ruhiges Banner, leuchtende Karte, Himmel ohne riesige Bilddatei. Dieser Übergang ist ein Verlauf, den CSS als besondere background-image zeichnet.
Was ist ein CSS-Verlauf?
Ein Verlauf ist ein Bild, das der Browser erzeugt — kein JPG zum Download. Sie beschreiben ihn mit Funktionen wie linear-gradient() und radial-gradient() und setzen ihn in background-image (oder die Kurzform background). Das Ergebnis liegt hinter dem Inhalt wie ein Foto-Hintergrund.
Arten auf einen Blick
Beginnen Sie mit diesen beiden. Kegelförmige Verläufe können warten.
📊 Alltägliche CSS-Verlaufsarten
| Art | Funktion | Alltagseinsatz |
|---|---|---|
| Linear | linear-gradient(…) |
Banner, Buttons, Abschnittswäsche links→rechts oder oben→unten |
| Radial | radial-gradient(…) |
Weiche Spotlight-Karten, kreisförmiges Ausblenden vom Zentrum |
| Richtungswörter | to right, to bottom |
Lesbare lineare Richtung ohne Winkel |
| Winkel | 45deg, 90deg |
Präzise Neigung, wenn Wörter nicht reichen |
| Farbstops | teal 0%, navy 100% |
Wo jede Farbe im Übergang sitzt |
Linear: zwei Farben, links nach rechts
Der einfachste lineare Verlauf braucht eine Richtung und mindestens zwei Farben. CSS mischt dazwischen.
Einfacher linearer Verlauf links→rechts
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}Die Funktion lesen
to right ist die Richtung. #0f766e startet; #0f172a endet. Der Browser füllt alles dazwischen.
Winkel und mehr Stops
Nutzen Sie einen Winkel für eine diagonale Wäsche und mittlere Stops für einen reicheren Übergang.
Gewinkelter Linearverlauf mit drei Stops
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}Stop-Gewohnheit
Ein Farbstop heißt „diese Farbe an dieser Stelle.“ Prozentwerte sind leicht lesbar. Positionen können fehlen — dann verteilt der Browser gleichmäßig.
Radial: Ausblenden vom Zentrum
radial-gradient() breitet sich von einem Mittelpunkt aus — gut für weiche Karten und Fokus-Glows.
Weiche Radialkarte
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}Kreis-Tipp
circle at center hält die Form rund und mittig. Später at top oder at 20% 30% für ein Spotlight woanders.
Verläufe leben auf background-image
Legen Sie keine Verlaufsfunktion in color — das färbt Text. Verläufe sind Hintergrundbilder; Textkontrast bleibt wichtig.
Kurzform mit Fallback-Farbe
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}Selbst ausprobieren
.bannermitlinear-gradient(to right, #0f766e, #0f172a)und hellem Text.- Richtung auf
to bottom— die Blendachse kippt. .heromit135degund drei Stops (Teal → Mitte → Navy)..cardmitradial-gradient(circle at center, #ccfbf1, #0f766e).- Optional: feste Fallback-Farbe vor dem Verlauf in der
background-Kurzform.
Häufige Fehler
color: linear-gradient(…)— Verläufe sind keine Textfarbe- Nur ein Farbstop — zum Mischen braucht es mindestens zwei Farben
- Vergessen, dass es
background-imageist (Kontrast und Stapel gelten weiter) - Regenbogen-Überladung auf jedem Abschnitt — weiche zwei- bis dreistopige Wäschen wirken professioneller
- Erwarten, dass Verläufe sinnvolle Fotos ersetzen (Produktbilder bleiben echte Bilder)
Kurz
- Verläufe sind vom Browser erzeugte Hintergrundbilder
linear-gradient()mischt entlang einer Linie;radial-gradient()vom Zentrum- Richtungswörter, Winkel und Farbstops steuern das Aussehen
- Anbinden mit
background-imageoderbackground-Kurzform - Textkontrast auf dem Verlauf stark halten
- Ein lineares Banner und eine Radialkarte üben, bevor Tricks folgen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt