CSS-Verläufe
CSS-Verläufe erzeugen weiche Farbübergänge. Erfahren Sie mehr über die Typen, die Syntax und viele Beispiele.
Ein CSS-Verlauf ist ein vom Browser erzeugtes Bild, das einen weichen, stufenlosen Übergang zwischen zwei oder mehr definierten Farben darstellt. Da ein Verlauf technisch gesehen ein <image> ist, kann er überall dort eingesetzt werden, wo CSS einen Bildwert erwartet — am häufigsten bei der Eigenschaft background-image, aber auch bei border-image, list-style-image und mask-image.
Verläufe sind auflösungsunabhängig (sie skalieren auf jede Größe ohne Qualitätsverlust) und erzeugen keinerlei zusätzliche HTTP-Anfragen, was sie zu einer schlanken Alternative zu Bilddateien für Hintergründe, Schaltflächen, Overlays und dekorative Formen macht.
Diese Seite behandelt die drei von CSS definierten Verlaufsfunktionen mit ausführbaren Beispielen für jede:
- Lineare Verläufe — Farben fließen entlang einer geraden Linie.
- Radiale Verläufe — Farben strahlen von einem Mittelpunkt nach außen.
- Konische Verläufe — Farben rotieren um einen Mittelpunkt.
Jede Funktion hat auch eine repeating-*-Variante, die das Verlaufsmuster kachelt, anstatt es einmal über das Element zu strecken.
Lineare Verläufe
Die Funktion linear-gradient() erzeugt ein Bild, bei dem die Farben entlang einer geraden Linie übergehen. Sie steuern dabei zwei Dinge: die Richtung dieser Linie und die Liste der Farbstopps entlang ihr. Ohne Richtungsangabe verläuft die Linie von oben nach unten.
Syntax des linearen Verlaufs
background-image: linear-gradient(direction, color1, color2, ...);direction ist optional. Es kann ein Schlüsselwort (to right, to bottom left) oder ein Winkel (90deg) sein. Alles danach ist die kommagetrennte Liste der Farben. Jeder gültige CSS-Farbwert funktioniert, einschließlich benannter Farben, Hex, rgb() und hsl().
Von oben nach unten
Lineare Verläufe verlaufen standardmäßig von oben nach unten, sodass die Richtung vollständig weggelassen werden kann.
Beispiel eines linearen Verlaufs von oben nach unten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Die background-color-Deklaration dient als Fallback: Sehr alte Browser, die den Verlauf nicht unterstützen, ignorieren die background-image-Zeile und greifen auf die Volltonfarbe zurück, sodass Text lesbar bleibt.
Von links nach rechts
Mit dem Schlüsselwort to right wird die Linie so gedreht, dass die erste Farbe am linken Rand und die letzte am rechten Rand liegt.
Beispiel eines linearen Verlaufs von links nach rechts
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #0052b0 ,#b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Diagonale Verläufe
Kombinieren Sie ein vertikales und ein horizontales Schlüsselwort (zum Beispiel to bottom right), um die Linie diagonal über das Element von Ecke zu Ecke verlaufen zu lassen.
Beispiel eines diagonalen Verlaufs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to bottom right, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Winkel verwenden
Für vollständige Kontrolle über die Richtung kann ein Winkel anstelle eines Schlüsselworts angegeben werden. Der Winkel wird im Uhrzeigersinn von der „oben"-Richtung gemessen: 0deg lässt die Verlaufslinie senkrecht nach oben zeigen (Farben fließen von unten nach oben), 90deg nach rechts (links nach rechts), 180deg nach unten. Negative Winkel drehen entgegen dem Uhrzeigersinn.
Beispiel eines linearen Verlaufs mit einem bestimmten Winkel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(70deg, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Mehrere Farben
Ein Verlauf kann beliebig viele Farben enthalten. Standardmäßig werden sie gleichmäßig verteilt, wobei jede Farbe weich in die nächste übergeht.
Beispiel eines linearen Verlaufs mit mehreren Farben
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Sie können eine Richtung mit mehreren Farben kombinieren und jede Farbe an einer bestimmten Position fixieren. Eine Position ist ein Prozentwert (0% ist der Anfang der Linie, 100% das Ende) oder eine absolute Länge. Wenn einer Farbe zwei Positionen zugewiesen werden, entsteht ein harter Farbstreifen zwischen diesen.
Beispiel eines linearen Verlaufs mit mehreren Farben von links nach rechts
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Beispiel eines linearen Verlaufs mit mehreren Farben von rechts nach links
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Transparenz
Farbstopps können teilweise oder vollständig transparent sein, was sich eignet, um einen Hintergrund in das dahinterliegende Element auszublenden. Verwenden Sie rgba() (oder eine beliebige Farbe mit Alphakanal) und setzen Sie den Alphawert von 0 (vollständig transparent) auf 1 (vollständig undurchsichtig). Dies ist die gängige Methode, um ein lesbares Overlay über ein Foto zu legen.
Beispiel eines linearen Verlaufs von Vollfarbe zu transparent
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Sich wiederholender linearer Verlauf
repeating-linear-gradient() kachelt ein Verlaufsmuster über das Element, anstatt es einmal zu strecken. Die Größe einer Wiederholung wird durch die Position des letzten Farbstopps festgelegt — hier 10%, sodass das Drei-Farben-Muster alle 10% der Linie wiederholt wird. Dies eignet sich hervorragend für Streifen und Fortschrittsbalken-Texturen.
Beispiel eines wiederholenden linearen Verlaufs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Radiale Verläufe
Ein radialer Verlauf strahlt von einem Mittelpunkt aus nach außen, wobei die erste Farbe in der Mitte und die letzte am Rand liegt. Es werden mindestens zwei Farbstopps benötigt. Der Verlauf kann als circle (Kreis) oder ellipse (Ellipse, Standard) geformt sein.
Syntax des radialen Verlaufs
background-image: radial-gradient(shape size at position, start-color, ..., last-color);Der Teil shape size at position ist optional. Wenn er weggelassen wird, ergibt sich eine farthest-corner-Ellipse, die im Element zentriert ist.
Beispiel eines radialen Verlaufs mit drei Farben
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509, #fff700, #05ff33);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Farbstopps bei radialen Verläufen positionieren
Wie bei linearen Verläufen können Sie jeden Farbstopp an einem Prozentwert oder einer absoluten Länge fixieren, um zu steuern, wie viel des Radius er einnimmt.
Beispiel unterschiedlich gesetzter Farbstopps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Den Mittelpunkt positionieren
Mit dem Schlüsselwort at können Sie den Mittelpunkt des Verlaufs vom Zentrum des Elements weg verschieben, indem Sie Prozent- oder absolute Längenangaben verwenden.
Beispiel eines radialen Verlaufs mit positioniertem Mittelpunkt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Form des radialen Verlaufs
Der Parameter shape ist entweder circle oder ellipse. Eine Ellipse (Standard) passt sich dem Seitenverhältnis des Elements an; ein Kreis bleibt unabhängig von Breite und Höhe des Elements perfekt rund.
Beispiel der Form eines radialen Verlaufs
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(red, yellow, green);
}
.gradient2 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h2>Ellipse:</h2>
<div class="gradient1"></div>
<h2>Circle:</h2>
<div class="gradient2"></div>
</body>
</html>Größe des radialen Verlaufs
Das Schlüsselwort für die Größe legt fest, wo der letzte Farbstopp liegt — also wie weit sich der Verlauf ausdehnt, bevor er endet. Es gibt vier Schlüsselwörter, gemessen vom Mittelpunkt des Verlaufs:
closest-side— endet an der nächstgelegenen Kante des Elements.closest-corner— endet an der nächstgelegenen Ecke.farthest-side— endet an der am weitesten entfernten Kante.farthest-corner— endet an der am weitesten entfernten Ecke. Dies ist der Standard.
Beispiel radialer Verläufe mit angegebener Größe
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient2 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient3 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient4 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
</style>
</head>
<body>
<h2>closest-side:</h2>
<div class="gradient1"></div>
<h2>farthest-side:</h2>
<div class="gradient2"></div>
<h2>closest-corner:</h2>
<div class="gradient3"></div>
<h2>farthest-corner:</h2>
<div class="gradient4"></div>
</body>
</html>Sich wiederholender radialer Verlauf
repeating-radial-gradient() kachelt das radiale Muster in konzentrischen Ringen vom Mittelpunkt nach außen. Wie bei der linearen Variante legt die Position des letzten Farbstopps die Größe eines Rings fest.
Beispiel eines wiederholenden radialen Verlaufs
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
height: 200px;
width: 200px;
background-color: blue;
background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Konische Verläufe
Ein konischer Verlauf dreht seine Farben um einen Mittelpunkt, ähnlich wie Uhrzeiger, die durch das Spektrum laufen. Während ein radialer Verlauf die Farbe beim Bewegen nach außen ändert, ändert ein konischer Verlauf die Farbe beim Bewegen um den Mittelpunkt herum. Damit ist er das natürliche Werkzeug für Kreisdiagramme, Farbräder und eckige Akzente.
Syntax des konischen Verlaufs
background-image: conic-gradient(color1, color2);Farbstopps werden durch Winkel (deg) statt durch Längen positioniert. Der Verlauf beginnt oben (0deg) und dreht sich im Uhrzeigersinn.
Beispiel eines einfachen konischen Verlaufs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(#ff0000, #fff200);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Mittelpunkt des konischen Verlaufs positionieren
Wie bei radialen Verläufen verschiebt das Schlüsselwort at den Mittelpunkt des Sweeps mithilfe von Prozent- oder absoluten Längenangaben.
Beispiel eines konischen Verlaufs mit positioniertem Mittelpunkt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Den Winkel ändern
Das Schlüsselwort from dreht den gesamten Sweep und verschiebt den Startpunkt bei 0deg.
Beispiel eines konischen Verlaufs mit gedrehtem Winkel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Sich wiederholender konischer Verlauf
repeating-conic-gradient() wiederholt das Winkelmuster rund um den Kreis — die klassische Methode, um Strahlen- und Schachbretteffekte zu erzeugen.
Beispiel eines wiederholenden konischen Verlaufs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Browser-Unterstützung und Tipps
Lineare und radiale Verläufe werden von jedem modernen Browser unterstützt. Konische Verläufe sind neuer — sie funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari. Wenn Sie sehr alte Browser unterstützen müssen, kombinieren Sie den Verlauf mit einer soliden background-color-Fallback-Angabe, wie weiter oben gezeigt.
Einige praktische Hinweise:
- Verläufe stapeln. Die Eigenschaft
background-imageakzeptiert eine kommagetrennte Liste, sodass Sie mehrere Verläufe übereinanderlegen können (der zuerst genannte liegt oben). Kombinieren Sie transparente Verläufe mit einem Foto, um Overlays zu erstellen. hsl()für weichere Übergänge verwenden. Beim Interpolieren zwischen sehr unterschiedlichen Farbtönen in Hex können trübe Grautöne entstehen; durch die Wahl ähnlicher Farbtöne oder die Verwendung vonhsl()bleiben Übergänge sauber.- Performance. Verläufe sind ressourcenschonend, aber das Animieren von Verläufen führt zu einem Neuzeichnen des gesamten Elements. Bevorzugen Sie für flüssige Animationen
transform/opacitygegenüber dem Verlauf selbst.
Verwandte Themen
background-image— die Eigenschaft, auf die Verläufe am häufigsten angewendet werden.background-size— Steuern Sie die Größe einer Verlaufsebene, um Kachelung zu ermöglichen.- CSS-Farben und CSS-Farbnamen — die Farbwerte, die in Verläufen verwendet werden.
- CSS-Übergänge — zum Animieren anderer Eigenschaften neben Verlaufshintergründen.