CSS-Farbverläufe verwenden

Lineare Farbverläufe verwenden

Ein linearer Farbverlauf erzeugt ein Farbband, dessen Farben entlang einer geraden Linie ineinander übergehen.

Ein einfacher linearer Farbverlauf

Für die einfachste Art von Farbverlauf müssen Sie lediglich zwei Farben angeben. Diese werden Farbstopps genannt. Mindestens zwei sind erforderlich, Sie können aber beliebig viele verwenden.

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

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

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

Die Richtung ändern

Standardmäßig verlaufen lineare Farbverläufe von oben nach unten. Sie können ihre Ausrichtung ä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 Farbverläufe

Sie können den Farbverlauf auch diagonal von einer Ecke zur anderen verlaufen lassen.

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

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

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

Winkel verwenden

Wenn Sie die Richtung genauer festlegen möchten, können Sie einen bestimmten Winkel angeben.

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

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

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

Bei der Verwendung eines Winkels erzeugt 0deg einen vertikalen Farbverlauf von unten nach oben und 90deg einen horizontalen Farbverlauf von links nach rechts. Weitere Winkel folgen im Uhrzeigersinn. Negative Winkel verlaufen gegen den Uhrzeigersinn.

Farben festlegen und Effekte erzeugen

Alle Arten von CSS-Farbverläufen bestehen aus Farben, die von ihrer Position abhängen. Die von CSS-Farbverläufen erzeugten Farben können sich mit der Position kontinuierlich ändern und so weiche Farbübergänge bilden. Es lassen sich auch einfarbige Bänder und abrupte Übergänge zwischen zwei Farben erzeugen. Die folgenden Möglichkeiten gelten für alle Farbverlaufsfunktionen:

Mehr als zwei Farben verwenden

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

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

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

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

Farbstopps positionieren

Farbstopps müssen nicht an ihren Standardpositionen bleiben. Um ihre Position genau festzulegen, können Sie für jeden Stopp null, einen oder zwei Prozentwerte angeben. Bei radialen und linearen Farbverläufen sind auch absolute Längenwerte möglich. Wenn Sie eine Position als Prozentwert angeben, steht 0% für den Anfangspunkt und 100% für den Endpunkt. Bei Bedarf können Sie auch Werte außerhalb dieses Bereichs verwenden, um den gewünschten Effekt zu erzielen. Lassen Sie eine Position weg, wird sie für den betreffenden Farbstopp automatisch berechnet: Der erste Farbstopp liegt bei 0%, der letzte bei 100% und alle übrigen jeweils in der Mitte zwischen ihren benachbarten Farbstopps.

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

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

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

Scharfe Trennlinien erzeugen

Um zwischen zwei Farben statt eines allmählichen Übergangs eine scharfe Trennlinie und damit einen Streifen zu erzeugen, können Sie benachbarte Farbstopps auf dieselbe Position setzen. In diesem Beispiel teilen sich die Farben einen Farbstopp bei 50%, also in der Mitte des Farbverlaufs:

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

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

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

Farbbänder und Streifen erzeugen

Um innerhalb eines Farbverlaufs einen einfarbigen Bereich ohne Übergang einzufügen, geben Sie für einen Farbstopp zwei Positionen an. Ein Farbstopp mit zwei Positionen entspricht zwei aufeinanderfolgenden Farbstopps derselben Farbe an unterschiedlichen Positionen. Die Farbe erreicht am ersten Farbstopp ihre volle Intensität, behält diese bis zum zweiten bei und geht anschließend bis zur ersten Position des benachbarten Farbstopps in dessen Farbe über.

<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% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}

Im ersten Beispiel oben reicht Limettengrün von der impliziten Position bei 0 % bis zur Position bei 20 %. Über die nächsten 10 % der Breite des Farbverlaufs geht es in Rot über. Bei 30 % ist das Rot vollständig erreicht und bleibt bis 45 % erhalten. Dort beginnt der Übergang zu Cyan, das über 15 % des Farbverlaufs als einfarbiger Bereich erscheint, und so weiter.

Im zweiten Beispiel befindet sich der zweite Farbstopp jeder Farbe an derselben Position wie der erste Farbstopp der benachbarten Farbe. Dadurch entsteht ein Streifenmuster.

Den Verlauf mit Farbübergangspunkten steuern

Standardmäßig erfolgt der Übergang zwischen den Farben zweier benachbarter Farbstopps gleichmäßig. In der Mitte zwischen den beiden Stopps liegt dabei der mittlere Farbwert. Sie können die Interpolation, also den Übergang zwischen zwei Farbstopps, steuern, indem Sie die Position eines Farbübergangspunkts angeben. Im folgenden Beispiel erreicht die Farbe den Mittelwert zwischen Limettengrün und Cyan bereits nach 20 % statt nach 50 % des Farbverlaufs. Das zweite Beispiel enthält keinen Farbübergangspunkt und verdeutlicht so dessen Wirkung:

<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);
}

Farbverläufe überlagern

Farbverläufe unterstützen Transparenz. Daher können Sie mehrere Hintergründe übereinanderlegen, um besondere Effekte zu erzielen. Die Hintergründe werden übereinandergeschichtet, wobei der zuerst angegebene ganz oben liegt.

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

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

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

Übereinanderliegende Farbverläufe

Sie können auch Farbverläufe übereinanderlegen. Solange die oberen Farbverläufe nicht vollständig deckend sind, bleiben die darunterliegenden 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%);
}

Farbverläufe mischen

Neben Transparenz, der Überlagerung mehrerer halbtransparenter Farbverläufe und der Platzierung von Farbverläufen über Rasterbildern als Hintergrund können Farbverläufe auch mit anderen CSS-Effekten kombiniert werden. In diesem Beispiel haben die vier <div>-Elemente dieselben beiden vollständig deckenden Farbverläufe als Hintergrundbilder. Auf die letzten drei wenden wir unterschiedliche Werte der CSS-Eigenschaft background-blend-mode an. Diese mischen die beiden Hintergrundbilder und erzeugen verschiedene Effekte.

<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;
}

Radiale Farbverläufe verwenden

Radiale Farbverläufe ähneln linearen Farbverläufen, breiten sich jedoch von einem Mittelpunkt aus. Sie können festlegen, wo dieser Mittelpunkt liegt. Außerdem können radiale Farbverläufe kreisförmig oder elliptisch sein.

Ein einfacher radialer Farbverlauf

Wie bei linearen Farbverläufen benötigen Sie für einen radialen Farbverlauf lediglich zwei Farben. Standardmäßig liegt der Mittelpunkt bei 50 % 50 % und der Farbverlauf ist eine Ellipse, die dem Seitenverhältnis des umschließenden Bereichs entspricht:

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

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

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

Radiale Farbstopps positionieren

Wie bei linearen Farbverläufen können Sie jeden radialen Farbstopp mit einem Prozentwert 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%);
}

Den Mittelpunkt des Farbverlaufs positionieren

Sie können den Mittelpunkt des Farbverlaufs mit Schlüsselwörtern, Prozentwerten oder absoluten Längen positionieren. Wenn nur ein Längen- oder Prozentwert angegeben wird, gilt er für beide Koordinaten. Andernfalls gibt der erste Wert die Position von links und der zweite die Position von oben an.

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

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

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

Die Größe radialer Farbverläufe festlegen

Anders als bei linearen Farbverläufen können Sie die Größe radialer Farbverläufe angeben. Mögliche Werte sind closest-corner, closest-side, farthest-corner und farthest-side. Der Standardwert ist farthest-corner. Für Kreise kann die Größe auch mit einer Länge und für Ellipsen mit einer Länge oder einem Prozentwert festgelegt werden.

Beispiel: closest-side für Ellipsen

Dieses Beispiel verwendet den Größenwert closest-side. Dabei wird die Größe durch den Abstand vom Ausgangspunkt (dem Mittelpunkt) zur nächstgelegenen Seite des umschließenden Bereichs bestimmt.

<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 ähnelt dem vorherigen. Die Größe wird jedoch mit farthest-corner festgelegt und ergibt sich aus dem Abstand vom Ausgangspunkt zur am weitesten entfernten Ecke des umschließenden Bereichs.

<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. Dadurch entspricht der Radius des Kreises dem Abstand zwischen dem Mittelpunkt des Farbverlaufs und der nächstgelegenen Seite. Hier ist das der Abstand zur unteren Kante: Der Farbverlauf liegt 25 % vom linken und 25 % vom unteren Rand entfernt, und das div-Element ist weniger hoch als breit.

<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 Prozentwert für Ellipsen

Nur bei Ellipsen können Sie die Größe mit Längen- oder Prozentwerten festlegen. Der erste Wert bezeichnet den horizontalen Radius, der zweite den vertikalen. Ein Prozentwert bezieht sich auf die Größe des umschließenden Bereichs in der jeweiligen Dimension. Im folgenden Beispiel wird für den horizontalen Radius ein Prozentwert 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

Bei Kreisen kann die Größe als <length> angegeben werden. Dieser Wert bestimmt die Größe des Kreises.

<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
  );
}

Übereinanderliegende radiale Farbverläufe

Wie lineare Farbverläufe können Sie auch radiale Farbverläufe übereinanderlegen. Der zuerst angegebene liegt ganz oben, der zuletzt angegebene ganz 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%;
}

Konische Farbverläufe verwenden

Die CSS-Funktion conic-gradient() erzeugt ein Bild mit Farbübergängen, die um einen Mittelpunkt rotieren, statt sich von ihm aus nach außen auszubreiten. Beispiele für konische Farbverläufe sind Kreisdiagramme und Farbkreise. Sie können damit aber auch Schachbrettmuster und andere interessante Effekte erzeugen.

Die Syntax von conic-gradient() ähnelt der von radial-gradient(). Die Farbstopps liegen jedoch auf einem Kreisbogen um den Mittelpunkt statt auf einer vom Mittelpunkt ausgehenden Verlaufslinie. Als Positionen für Farbstopps dienen Prozent- oder Winkelwerte; absolute Längen sind nicht zulässig.

Bei einem radialen Farbverlauf gehen die Farben vom Mittelpunkt einer Ellipse aus in alle Richtungen nach außen ineinander über. Bei einem konischen Farbverlauf gehen sie ineinander über, als würden sie um den Mittelpunkt eines Kreises gedreht – beginnend oben und im Uhrzeigersinn fortlaufend. Wie bei radialen Farbverläufen können Sie den Mittelpunkt positionieren. Wie bei linearen Farbverläufen können Sie den Winkel des Farbverlaufs ändern.

Ein einfacher konischer Farbverlauf

Wie bei linearen und radialen Farbverläufen benötigen Sie für einen konischen Farbverlauf lediglich zwei Farben. Standardmäßig liegt der Mittelpunkt bei 50 % 50 % und der Farbverlauf beginnt oben:

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

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

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

Den Mittelpunkt eines konischen Farbverlaufs positionieren

Wie bei radialen Farbverläufen können Sie den Mittelpunkt eines konischen Farbverlaufs mit Schlüsselwörtern, Prozentwerten oder absoluten Längen positionieren. Dazu verwenden Sie das 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%);
}

Den Winkel ändern

Standardmäßig sind die angegebenen Farbstopps gleichmäßig um den Kreis verteilt. Sie können den Anfangswinkel eines konischen Farbverlaufs festlegen, indem Sie am Anfang das Schlüsselwort from gefolgt von einem Winkel oder einer Länge verwenden. Für Farbstopps können Sie unterschiedliche Positionen angeben, indem Sie ihnen jeweils einen Winkel oder eine Länge nachstellen.

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

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

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

Sich wiederholende Farbverläufe verwenden

Die Funktionen linear-gradient(), radial-gradient() und conic-gradient() unterstützen keine automatische Wiederholung von Farbstopps. Dafür stehen die Funktionen repeating-linear-gradient(), repeating-radial-gradient() und repeating-conic-gradient() zur Verfügung.

Die Größe der sich wiederholenden Verlaufslinie oder des Kreisbogens entspricht dem Abstand zwischen der Position des ersten und der Position des letzten Farbstopps. Wenn für den ersten Farbstopp nur eine Farbe und keine Position angegeben ist, gilt standardmäßig der Wert 0. Wenn für den letzten Farbstopp nur eine Farbe und keine Position angegeben ist, gilt standardmäßig 100 %. Ist für keinen der beiden eine Position angegeben, umfasst die Verlaufslinie 100 %. Das bedeutet, dass sich lineare und konische Farbverläufe nicht wiederholen. Ein radialer Farbverlauf wiederholt sich dann nur, wenn sein Radius kleiner ist als der Abstand zwischen dem Mittelpunkt des Farbverlaufs und der am weitesten entfernten Ecke. Wird für den ersten Farbstopp ein Wert größer als 0 angegeben, wiederholt sich der Farbverlauf, sofern der Abstand zwischen dem ersten und dem letzten Farbstopp weniger als 100 % beziehungsweise 360 Grad beträgt.

Sich wiederholende lineare Farbverläufe

Dieses Beispiel verwendet repeating-linear-gradient(), um einen Farbverlauf zu erzeugen, der sich entlang einer geraden Linie wiederholt. Dabei durchlaufen die Farben immer wieder dieselbe Abfolge. Die Verlaufslinie ist hier 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 sich wiederholende lineare Farbverläufe

Wie bei gewöhnlichen linearen und radialen Farbverläufen können Sie mehrere Farbverläufe übereinanderlegen. Das ist nur sinnvoll, wenn die Farbverläufe teilweise transparent sind und darunterliegende Farbverläufe durchscheinen lassen, oder wenn Sie für jedes Verlaufsbild unterschiedliche background-sizes und gegebenenfalls unterschiedliche Werte für background-position angeben. Hier verwenden wir Transparenz.

In diesem Fall sind die Verlaufslinien 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
    );
}

Karomuster aus Farbverläufen

Um ein Karomuster zu erzeugen, legen wir mehrere transparente Farbverläufe übereinander. Dabei verwenden wir die Syntax für Farbstopps mit mehreren Positionen:

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

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

.plaid-gradient {
  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
    );
}

Sich wiederholende radiale Farbverläufe

Dieses Beispiel verwendet repeating-radial-gradient(), um einen Farbverlauf zu erzeugen, der sich von einem Mittelpunkt aus wiederholt. Dabei durchlaufen die Farben immer wieder dieselbe Abfolge.

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

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

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

Mehrere sich wiederholende radiale Farbverlä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;
}

Sich wiederholende konische Farbverläufe

Dieses Beispiel verwendet repeating-conic-gradient(), um einen Farbverlauf zu erzeugen, der sich um einen Mittelpunkt wiederholt. Hier werden die angegebenen Farbstopps viermal 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 sich wiederholende konische Farbverläufe

Wie bei sich wiederholenden linearen und radialen Farbverläufen können Sie mehrere konische Farbverläufe übereinanderlegen. Mit unterschiedlichen Werten für at <position> liegen ihre Mittelpunkte nicht übereinander; unterschiedliche Werte für from <angle> sorgen dafür, dass ihre Wiederholungen versetzt sind. So entstehen interessante Effekte. In diesem Beispiel überlagern sich drei halbtransparente, sich wiederholende radiale Farbverläufe, deren Farbabfolgen sich jeweils viermal wiederholen. Damit die überlagerten Farbverläufe sichtbar sind, müssen die Farben der oberen Farbverläufe teilweise transparent sein. Alternativ können Sie die CSS-Eigenschaft background-blend-mode 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

• Farbverlaufsfunktionen: linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()
• CSS-Datentypen für Farbverläufe: <gradient>, <image>
• CSS-Eigenschaften für Farbverläufe: background, background-image
• Galerie mit CSS-Farbverlaufsmustern von Lea Verou
• CSS-Farbverlaufsgenerator
• Erweiterter CSS-Farbverlaufsgenerator
• HDR-Farbverlaufsgenerator