Verwendung von CSS-Verläufen

Verwendung linearer Verläufe

Ein linearer Verlauf erzeugt ein Farbbereich, das in einer geraden Linie fortschreitet.

Ein grundlegender linearer Verlauf

Um den grundlegendsten Typ eines Verlaufs zu erstellen, müssen Sie nur zwei Farben angeben. Diese werden als Farbstopps bezeichnet. Sie müssen mindestens zwei haben, aber Sie können beliebig viele haben.

<div class="simple-linear"></div>

div {
  width: 120px;
  height: 120px;
}

.simple-linear {
  background: linear-gradient(blue, pink);
}

Ändern der Richtung

Standardmäßig verlaufen lineare Verläufe von oben nach unten. Sie können deren Rotation ändern, indem Sie eine Richtung angeben.

<div class="horizontal-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

Diagonale Verläufe

Sie können den Verlauf sogar diagonal von Ecke zu Ecke verlaufen lassen.

<div class="diagonal-gradient"></div>

div {
  width: 200px;
  height: 100px;
}

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

Verwendung von Winkeln

Wenn Sie mehr Kontrolle über die Richtung haben möchten, können Sie dem Verlauf einen bestimmten Winkel geben.

<div class="angled-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

Wenn Sie einen Winkel verwenden, erstellt 0deg einen vertikalen Verlauf, der von unten nach oben verläuft, 90deg erstellt einen horizontalen Verlauf, der von links nach rechts verläuft, und so weiter im Uhrzeigersinn. Negative Winkel verlaufen in Gegenrichtung.

Farben deklarieren & Effekte erstellen

Alle CSS-Verlaufsarten sind ein Bereich von positionsabhängigen Farben. Die durch CSS-Verläufe erzeugten Farben können sich kontinuierlich mit der Position ändern und fließende Farbüberblendungen erzeugen. Es ist auch möglich, Streifen von Vollfarben und harte Übergänge zwischen zwei Farben zu erstellen. Das Folgende gilt für alle Verlaufsfunktionen:

Mehr als zwei Farben verwenden

Sie müssen sich nicht auf zwei Farben beschränken – Sie können so viele verwenden, wie Sie möchten! Standardmäßig sind die Farben gleichmäßig über den Verlauf verteilt.

<div class="auto-spaced-linear-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

Positionierung von Farbstopps

Sie müssen Ihre Farbstopps nicht an ihren Standardpositionen belassen. Um ihre Positionen feinabzustimmen, können Sie jedem einzelnen null, einen oder zwei Prozentwerte oder, für radiale und lineare Verläufe, absolute Längenwerte geben. Wenn Sie die Position als Prozentsatz angeben, stellt 0% den Startpunkt dar, während 100% den Endpunkt darstellt; Sie können jedoch Werte außerhalb dieses Bereichs verwenden, um den gewünschten Effekt zu erzielen. Wenn Sie eine Position nicht angeben, wird die Position dieses bestimmten Farbstopps automatisch für Sie berechnet, wobei der erste Farbstopp bei 0% liegt und der letzte Farbstopp bei 100%, und alle anderen Farbstopps halbwegs zwischen ihren angrenzenden Farbstopps liegen.

<div class="multicolor-linear"></div>

div {
  width: 120px;
  height: 120px;
}

.multicolor-linear {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

Harte Linien erstellen

Um eine harte Linie zwischen zwei Farben zu erstellen und einen Streifen anstatt eines allmählichen Übergangs zu schaffen, können benachbarte Farbstopps auf die gleiche Position gesetzt werden. In diesem Beispiel teilen sich die Farben einen Farbstopp an der 50%-Markierung, in der Mitte des Verlaufs:

<div class="striped"></div>

div {
  width: 120px;
  height: 120px;
}

.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

Verlaufs-Hinweise

Standardmäßig geht der Verlauf gleichmäßig von einer Farbe zur nächsten über. Sie können einen Farb-Hinweis einfügen, um den Mittelpunkt des Übergangswerts an einem bestimmten Punkt entlang des Verlaufs zu verschieben. In diesem Beispiel haben wir den Mittelpunkt des Übergangs von der 50%-Markierung zur 10%-Markierung verschoben.

<div class="color-hint"></div>
<div class="simple-linear"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
}

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

Farbstreifen und -bänder erstellen

Um einen festen, nicht übergehenden Farbbereich innerhalb eines Verlaufs einzufügen, fügen Sie zwei Positionen für den Farbstopp ein. Farbstopps können zwei Positionen haben, was zwei aufeinanderfolgende Farbstopps mit derselben Farbe an unterschiedlichen Positionen entspricht. Die Farbe erreicht ihre volle Sättigung am ersten Farbstopp, behält diese Sättigung bis zum zweiten Farbstopp bei und wechselt dann zur Farbe des angrenzenden Farbstopps durch die erste Position des angrenzenden Farbstopps.

<div class="multiposition-stops"></div>
<div class="multiposition-stop2"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}

.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}

Im ersten Beispiel oben geht das Limettengrün von der 0%-Markierung, was impliziert wird, zur 20%-Markierung, wechselt innerhalb der nächsten 10% der Breite des Verlaufs von Limettengrün zu Rot, erreicht bei der 30%-Markierung festes Rot und bleibt bis zur 45%-Markierung des Verlaufs festes Rot, wo es zu Cyan übergeht, wird für 15% des Verlaufs vollständig Cyan, und so weiter.

Im zweiten Beispiel liegt der zweite Farbstopp für jede Farbe an derselben Position wie der erste Farbstopp für die angrenzende Farbe, was einen Streifeneffekt erzeugt.

In beiden Beispielen wird der Verlauf zweimal geschrieben: Der erste ist die Methode der CSS Images Level 3 zur Wiederholung der Farbe für jede Haltestelle, und das zweite Beispiel ist die Methode der CSS Images Level 4 mit mehreren Haltestellen, bei der zwei Farbstopp-Längen in einer linearen Farbstopp-Deklaration enthalten sind.

Steuerung der Progression eines Verlaufs

Standardmäßig verläuft ein Verlauf gleichmäßig zwischen den Farben zweier benachbarter Farbstopps, wobei der Mittelpunkt zwischen diesen beiden Farbstopps der Mittelpunkt des Farbwerts ist. Sie können die Interpolation oder Fortschreibung zwischen zwei Farbstopps steuern, indem Sie einen Farbhinweisort hinzufügen. In diesem Beispiel erreicht die Farbe den Mittelpunkt zwischen Limettengrün und Cyan 20% des Weges durch den Verlauf anstatt 50% des Weges. Das zweite Beispiel enthält den Hinweis nicht, um den Unterschied hervorzuheben, den der Farbhinweis bewirken kann:

<div class="color-hint-gradient"></div>
<div class="regular-progression"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}

.color-hint-gradient {
  background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, lime, cyan);
}

Überlagernde Verläufe

Verläufe unterstützen Transparenz, sodass Sie mehrere Hintergründe stapeln können, um einige ziemlich ausgefallene Effekte zu erzielen. Die Hintergründe werden von oben nach unten gestapelt, wobei der zuerst angegebene oben liegt.

<div class="layered-image"></div>

div {
  width: 300px;
  height: 150px;
}

.layered-image {
  background:
    linear-gradient(to right, transparent, mistyrose), url("critters.png");
}

Gestapelte Verläufe

Sie können sogar Verläufe mit anderen Verläufen stapeln. Solange die oberen Verläufe nicht vollständig undurchsichtig sind, sind die unteren Verläufe immer noch sichtbar.

<div class="stacked-linear"></div>

div {
  width: 200px;
  height: 200px;
}

.stacked-linear {
  background:
    linear-gradient(217deg, rgb(255 0 0 / 80%), transparent 70.71%),
    linear-gradient(127deg, rgb(0 255 0 / 80%), transparent 70.71%),
    linear-gradient(336deg, rgb(0 0 255 / 80%), transparent 70.71%);
}

Mischende Verläufe

Neben der Transparenz können mehrere halbtransparente Verläufe gestapelt und Verläufe über Rasterhintergrundbilder gestapelt werden, und Verläufe können mit anderen CSS-Effekten verwendet werden. In diesem Beispiel haben die vier <div>-Elemente dieselben zwei vollständig opaken Verläufe als Hintergrundbilder. Wir wenden verschiedene background-blend-mode-CSS-Eigenschaftswerte auf die letzten drei an, die die beiden Hintergrundbilder mischen und unterschiedliche Effekte erzeugen.

<div class="original"></div>
<div class="screen"></div>
<div class="overlay"></div>
<div class="difference"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}

div {
  background:
    linear-gradient(to top, red, blue),
    linear-gradient(to right, #5500ff, #00ff55);
}

.screen {
  background-blend-mode: screen;
}

.overlay {
  background-blend-mode: overlay;
}

.difference {
  background-blend-mode: difference;
}

Verwendung radialer Verläufe

Radiale Verläufe sind ähnlich wie lineare Verläufe, mit dem Unterschied, dass sie von einem zentralen Punkt aus strahlen. Sie können bestimmen, wo sich dieser zentrale Punkt befindet. Sie können sie auch rund oder elliptisch machen.

Ein grundlegender radialer Verlauf

Wie bei linearen Verläufen benötigen Sie nur zwei Farben, um einen radialen Verlauf zu erstellen. Standardmäßig liegt der Mittelpunkt des Verlaufs bei der 50%-50%-Markierung, und der Verlauf ist elliptisch und passt zum Seitenverhältnis seiner Box:

<div class="simple-radial"></div>

div {
  width: 240px;
  height: 120px;
}

.simple-radial {
  background: radial-gradient(red, blue);
}

Positionierung radialer Farbstopps

Ähnlich wie bei linearen Verläufen können Sie jeden radialen Farbstopp mit einem Prozentsatz oder einer absoluten Länge positionieren.

<div class="radial-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, dodgerblue 50%);
}

Positionierung des Zentrums des Verlaufs

Sie können das Zentrum des Verlaufs mit Schlüsselbegriffe, Prozentsätzen oder absoluten Längen positionieren, wobei Längen- und Prozentwerte wiederholt werden, wenn nur einer vorhanden ist, ansonsten in der Reihenfolge der Position von links und der Position von oben.

<div class="radial-gradient"></div>

div {
  width: 120px;
  height: 240px;
}

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, dodgerblue 50%);
}

Größe von radialen Verläufen

Im Gegensatz zu linearen Verläufen können Sie die Größe von radialen Verläufen angeben. Mögliche Werte sind closest-corner, closest-side, farthest-corner und farthest-side, wobei farthest-corner der Standardwert ist. Kreise können auch mit einer Länge, und Ellipsen mit einer Länge oder einem Prozentsatz dimensioniert werden.

Beispiel: closest-side für Ellipsen

Dieses Beispiel verwendet den closest-side-Größenwert, was bedeutet, dass die Größe durch den Abstand vom Ausgangspunkt (dem Zentrum) zur nächsten Seite der umgebenden Box festgelegt wird.

<div class="radial-ellipse-side"></div>

div {
  width: 240px;
  height: 100px;
}

.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

Beispiel: farthest-corner für Ellipsen

Dieses Beispiel ist ähnlich wie das vorherige, mit der Ausnahme, dass seine Größe als farthest-corner angegeben wird, was die Größe des Verlaufs durch den Abstand vom Ausgangspunkt zur am weitesten entfernten Ecke der umgebenden Box vom Ausgangspunkt festlegt.

<div class="radial-ellipse-far"></div>

div {
  width: 240px;
  height: 100px;
}

.radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

Beispiel: closest-side für Kreise

Dieses Beispiel verwendet closest-side, was dazu führt, dass der Radius des Kreises der Entfernung zwischen dem Zentrum des Verlaufs und der nächsten Seite entspricht. In diesem Fall ist der Radius die Entfernung zwischen dem Zentrum und der unteren Kante, weil der Verlauf 25% vom linken und 25% vom unteren Rand entfernt platziert ist und die Höhe des div-Elements kleiner ist als die Breite.

<div class="radial-circle-close"></div>

div {
  width: 240px;
  height: 120px;
}

.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

Beispiel: Länge oder Prozentsatz für Ellipsen

Nur für Ellipsen können Sie die Ellipse mit einer Länge oder einem Prozentsatz dimensionieren. Der erste Wert stellt den horizontalen Radius dar, der zweite den vertikalen Radius. Wenn Sie einen Prozentsatz verwenden, entspricht dies der Größe der Box in dieser Dimension. Im unteren Beispiel habe ich einen Prozentsatz für den horizontalen Radius verwendet.

<div class="radial-ellipse-size"></div>

div {
  width: 240px;
  height: 120px;
}

.radial-ellipse-size {
  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

Beispiel: Länge für Kreise

Für Kreise kann die Größe als <length> angegeben werden, was die Größe des Kreises ist.

<div class="radial-circle-size"></div>

div {
  width: 240px;
  height: 120px;
}

.radial-circle-size {
  background: radial-gradient(
    circle 50px,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

Gestapelte radiale Verläufe

Genau wie bei linearen Verläufen können Sie auch radiale Verläufe stapeln. Der zuerst angegebene liegt oben, der letzte unten.

<div class="stacked-radial"></div>

div {
  width: 200px;
  height: 200px;
}

.stacked-radial {
  background:
    radial-gradient(circle at 50% 0, rgb(255 0 0 / 50%), transparent 70.71%),
    radial-gradient(circle at 6.7% 75%, rgb(0 0 255 / 50%), transparent 70.71%),
    radial-gradient(circle at 93.3% 75%, rgb(0 255 0 / 50%), transparent 70.71%)
      beige;
  border-radius: 50%;
}

Verwendung konischer Verläufe

Die conic-gradient()-Funktion erstellt ein Bild, das aus einem Verlauf mit Farbüberblendungen besteht, die um einen Mittelpunkt herum gedreht sind (anstatt vom Zentrum auszustrahlen). Beispielhaft konische Verläufe umfassen Tortendiagramme und Farbräder, aber sie können auch verwendet werden, um Schachbretter und andere interessante Effekte zu erstellen.

Die Syntax des konischen Verlaufs ähnelt der der radialen Verlaufs, aber die Farbstopps werden um einen Verlaufsbogen, den Umfang eines Kreises herum, und nicht auf dem vom Mittelpunkt ausgehenden Verlaufsstrich platziert. Die Farbstopps sind Prozentwerte oder Winkel: Absolute Längen sind nicht gültig.

In einem radialen Verlauf reichen die Farben vom Zentrum einer Ellipse aus nach außen in alle Richtungen. Bei konischen Verläufen ändern sich die Farben, als ob sie um das Zentrum eines Kreises gedreht würden, beginnend oben und im Uhrzeigersinn verlaufend. Ähnlich wie bei radialen Verläufen können Sie das Zentrum des Verlaufs positionieren. Ähnlich wie bei linearen Verläufen können Sie den Verlaufswinkel ändern.

Ein grundlegender konischer Verlauf

Wie bei linearen und radialen Verläufen benötigen Sie nur zwei Farben, um einen konischen Verlauf zu erstellen. Standardmäßig liegt der Mittelpunkt des Verlaufs bei der 50%-50%-Markierung, wobei der Beginn des Verlaufs nach oben zeigt:

<div class="simple-conic"></div>

div {
  width: 120px;
  height: 120px;
}

.simple-conic {
  background: conic-gradient(red, blue);
}

Positionierung des konischen Zentrums

Wie bei radialen Verläufen können Sie das Zentrum des konischen Verlaufs mit Schlüsselwörtern, Prozentsätzen oder absoluten Längen positionieren, mit dem Schlüsselwort "at".

<div class="conic-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, dodgerblue 50%);
}

Ändern des Winkels

Standardmäßig sind die von Ihnen angegebenen verschiedenen Farbstopps gleichmäßig um den Kreis herum angeordnet. Sie können den Startwinkel des konischen Verlaufs einstellen, indem Sie das Schlüsselwort "from" am Anfang gefolgt von einem Winkel oder einer Länge verwenden, und Sie können für die Farbenstopps unterschiedliche Positionen angeben, indem Sie einen Winkel oder eine Länge nach ihnen einfügen.

<div class="conic-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}

Verwendung wiederholter Verläufe

Die Funktionen linear-gradient(), radial-gradient() und conic-gradient() unterstützen keine automatisch wiederholten Farbstopps. Allerdings stehen die Funktionen repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient() zur Verfügung, um diese Funktionalität zu bieten.

Die Größe der Verlaufsstrecke oder des Verlaufsbogens, der sich wiederholt, ist die Länge zwischen dem ersten Farbpunkt und dem letzten Farbstopplängenwert. Wenn der erste Farbstopp nur eine Farbe und keinen Farbstopplängenwert hat, beträgt der Wert standardmäßig 0. Wenn der letzte Farbstopp nur eine Farbe und keinen Farbstopplängenwert hat, beträgt der Wert standardmäßig 100%. Wenn keiner angegeben ist, ist die Verlaufsstrecke 100%, was bedeutet, dass die linearen und konischen Verlaufs nicht wiederholt werden und der radiale Verlauf nur wiederholt wird, wenn der Radius des Verlaufs kleiner ist als die Länge zwischen dem Mittelpunkt des Verlaufs und der nächstgelegenen Ecke. Wenn der erste Farbstopp angegeben ist und der Wert größer als 0 ist, wird der Verlauf wiederholt, da die Größe der Linie oder des Bogens die Differenz zwischen dem ersten und letzten Farbstopp weniger als 100% oder 360 Grad beträgt.

Wiederholte lineare Verläufe

Dieses Beispiel verwendet repeating-linear-gradient(), um einen Verlauf zu erstellen, der sich wiederholt in einer geraden Linie fortsetzt. Die Farben werden immer wieder durchlaufen, wenn der Verlauf wiederholt wird. In diesem Fall ist die Verlaufsstrecke 10px lang.

<div class="repeating-linear"></div>

div {
  width: 120px;
  height: 120px;
}

.repeating-linear {
  background: repeating-linear-gradient(
    -45deg,
    red,
    red 5px,
    blue 5px,
    blue 10px
  );
}

Mehrere wiederholte lineare Verläufe

Ähnlich wie bei regulären linearen und radialen Verläufen können Sie mehrere Verläufe übereinander einfügen. Das macht nur Sinn, wenn die Verläufe teilweise transparent sind und somit nachfolgende Verläufe durch die transparenten Bereiche sichtbar werden, oder wenn Sie unterschiedliche background-sizes verwenden, optional mit verschiedenen background-position-Eigenschaftenwerten für jedes Verlaufsbild. Wir verwenden Transparenz.

In diesem Fall sind die Verlaufsstrecken 300px, 230px und 300px lang.

<div class="multi-repeating-linear"></div>

div {
  width: 600px;
  height: 400px;
}

.multi-repeating-linear {
  background:
    repeating-linear-gradient(
      190deg,
      rgb(255 0 0 / 50%) 40px,
      rgb(255 153 0 / 50%) 80px,
      rgb(255 255 0 / 50%) 120px,
      rgb(0 255 0 / 50%) 160px,
      rgb(0 0 255 / 50%) 200px,
      rgb(75 0 130 / 50%) 240px,
      rgb(238 130 238 / 50%) 280px,
      rgb(255 0 0 / 50%) 300px
    ),
    repeating-linear-gradient(
      -190deg,
      rgb(255 0 0 / 50%) 30px,
      rgb(255 153 0 / 50%) 60px,
      rgb(255 255 0 / 50%) 90px,
      rgb(0 255 0 / 50%) 120px,
      rgb(0 0 255 / 50%) 150px,
      rgb(75 0 130 / 50%) 180px,
      rgb(238 130 238 / 50%) 210px,
      rgb(255 0 0 / 50%) 230px
    ),
    repeating-linear-gradient(
      23deg,
      red 50px,
      orange 100px,
      yellow 150px,
      green 200px,
      blue 250px,
      indigo 300px,
      violet 350px,
      red 370px
    );
}

Karierter Verlauf

Um ein Karo-Muster zu erstellen, fügen wir mehrere überlappende Verläufe mit Transparenz ein. In der ersten Hintergrunddeklaration haben wir jeden Farbstopp separat aufgeführt. Die zweite Hintergrunddeklaration verwendet die Syntax für mehrere Positionalstopps:

<div class="plaid-gradient"></div>

div {
  width: 200px;
  height: 200px;
}

.plaid-gradient {
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    );

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    );
}

Wiederholte radiale Verläufe

Dieses Beispiel verwendet repeating-radial-gradient(), um einen Verlauf zu erstellen, der sich wiederholt von einem zentralen Punkt aus ausbreitet. Die Farben werden immer wieder durchlaufen, wenn der Verlauf wiederholt wird.

<div class="repeating-radial"></div>

div {
  width: 120px;
  height: 120px;
}

.repeating-radial {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

Mehrere wiederholte radiale Verläufe

<div class="multi-target"></div>

div {
  width: 250px;
  height: 150px;
}

.multi-target {
  background:
    repeating-radial-gradient(
        ellipse at 80% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 15px,
        rgb(255 255 255 / 50%) 15px,
        rgb(255 255 255 / 50%) 30px
      )
      top left no-repeat,
    repeating-radial-gradient(
        ellipse at 20% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 10px,
        rgb(255 255 255 / 50%) 10px,
        rgb(255 255 255 / 50%) 20px
      )
      top left no-repeat yellow;
  background-size:
    200px 200px,
    150px 150px;
}

Wiederholte konische Verläufe

Dieses Beispiel verwendet repeating-conic-gradient(), um einen Verlauf zu erstellen, der sich wiederholt um einen Mittelpunkt dreht. In diesem Fall werden die deklarierten Farbstopps vierfach wiederholt.

<div class="repeating-conic"></div>

div {
  width: 120px;
  height: 120px;
}

.repeating-conic {
  background: repeating-conic-gradient(
    #66ccff 0% 8.25%,
    #6633ff 8.25% 16.5%,
    #ff3399 16.5% 25%
  );
}

Mehrere wiederholte konische Verläufe

Ähnlich wie bei linearen und radialen wiederholten Verläufen können Sie mehrere konische Verläufe übereinander stapeln, um interessante Effekte zu erzeugen, indem Sie unterschiedliche at <position>-Werte verwenden, sodass sich die konischen Verläufe nicht in ihren Zentren überlappen, und unterschiedliche from <angle>-Werte, sodass sich die Wiederholungseffekte nicht überlappen. In diesem Beispiel überlappen sich drei halbtransparente wiederholte radiale Verläufe, die jeweils ihr Farbschema viermal wiederholen. Um überlappende Verläufe sichtbar zu machen, müssen Sie entweder sicherstellen, dass die Farben der oben auf dem Stapel befindlichen Verläufe teilweise transparent sind, oder die background-blend-mode-CSS-Eigenschaft verwenden.

<div class="multi-repeating-conic"></div>

div {
  width: 250px;
  height: 250px;
}

.multi-repeating-conic {
  background:
    repeating-conic-gradient(
      from 0deg at 80% 50%,
      #5691f580 0% 8.25%,
      #b338ff80 8.25% 16.5%,
      #f8305880 16.5% 25%
    ),
    repeating-conic-gradient(
      from 15deg at 50% 50%,
      #e856f580 0% 8.25%,
      #ff384c80 8.25% 16.5%,
      #e7f83080 16.5% 25%
    ),
    repeating-conic-gradient(
      from 0deg at 20% 50%,
      #f58356ff 0% 8.25%,
      #caff38ff 8.25% 16.5%,
      #30f88aff 16.5% 25%
    );
}

Siehe auch

• Verlaufsfunktionen: linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()
• Verlaufsbezogene CSS-Datentypen: <gradient>, <image>
• Verlaufsbezogene CSS-Eigenschaften: background, background-image
• CSS Gradients Patterns Gallery, von Lea Verou
• Gradient CSS Generator
• Erweiterter CSS-Verlaufs-Generator
• HDR-Verlaufs-Generator