repeating-radial-gradient()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die repeating-radial-gradient() CSS Funktion erstellt ein Bild, das aus sich wiederholenden Gradienten besteht, die von einem Ursprung ausstrahlen. Sie ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, jedoch wiederholt sie die Farbstopps unendlich in alle Richtungen, um ihren gesamten Container abzudecken, ähnlich wie repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>, einer speziellen Art von <image>.

Probieren Sie es aus

Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Dimensionen des grundlegenden radialen Gradienten (die Entfernung zwischen dem letzten und dem ersten Farbstopp) verschoben. Dadurch fällt die Position jedes endenden Farbstopps mit einem startenden Farbstopp zusammen; wenn die Farbwerte unterschiedlich sind, resultiert dies in einem scharfen visuellen Übergang, der gemildert werden kann, indem die erste Farbe als letzte Farbe wiederholt wird.

Wie bei jedem Gradienten hat ein sich wiederholender radialer Gradient keine intrinsischen Dimensionen; d.h., er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Verhältnis. Seine konkrete Größe wird der Größe des Elements entsprechen, auf das er angewendet wird.

Da <gradient>s zum Datentyp <image> gehören, können sie nur dort verwendet werden, wo <image>s eingesetzt werden können. Aus diesem Grund funktioniert repeating-radial-gradient() nicht mit background-color und anderen Eigenschaften, die den Datentyp <color> verwenden.

Syntax

css
/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green,
   with the colors repeating every 30px */
repeating-radial-gradient(circle at center, red 0, blue, green 30px)

/* An elliptical gradient near the top left of its container,
   starting red, changing to green and back again,
   repeating five times between the center and the bottom right corner,
   and only once between the center and the top left corner */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)

Werte

<position>

Die Position des Gradienten, interpretiert auf die gleiche Weise wie background-position oder transform-origin. Wenn nichts angegeben ist, ist der Standardwert center.

<shape>

Die Form des Gradienten. Der Wert kann circle sein (was bedeutet, dass die Form des Gradienten ein Kreis mit konstantem Radius ist) oder ellipse (was bedeutet, dass die Form eine achsenparallele Ellipse ist). Wenn nichts angegeben ist, ist der Standardwert ellipse.

<extent-keyword>

Ein Schlüsselwort, das beschreibt, wie groß die endende Form sein muss. Die möglichen Werte sind:

Schlüsselwort Beschreibung
closest-side Die endende Form des Gradienten trifft auf die Seite des Kastens, die dem Zentrum am nächsten ist (für Kreise) oder trifft auf die vertikalen und horizontalen Seiten (für Ellipsen).
closest-corner Die endende Form des Gradienten wird so dimensioniert, dass sie genau auf die dem Zentrum nächstgelegene Ecke des Kastens trifft.
farthest-side Ähnlich wie closest-side, nur dass die endende Form so dimensioniert ist, dass sie die weiteste Seite des Kastens vom Zentrum aus trifft (oder die vertikalen und horizontalen Seiten).
farthest-corner Die endende Form des Gradienten wird so dimensioniert, dass sie genau auf die am weitesten entfernte Ecke des Kastens vom Zentrum trifft.

Hinweis: Frühere Implementierungen dieser Funktion beinhalteten andere Schlüsselwörter (cover und contain) als Synonyme für die Standardbegriffe farthest-corner und closest-side. Verwenden Sie nur die Standardbegriffe, da einige Implementierungen diese älteren Varianten bereits entfernt haben.

<color-stop>

Ein Wert des <color> eines Farbstopps, gefolgt von einer optionalen Stopp-Position (entweder ein <percentage> oder ein <length> entlang der Achse des Gradienten). Ein Prozentsatz von 0% oder eine Länge von 0 repräsentiert das Zentrum des Gradienten; der Wert 100% repräsentiert das Zusammentreffen der endenden Form mit dem virtuellen Gradientenstrahl. Prozentuale Werte dazwischen sind linear auf dem virtuellen Gradientenstrahl positioniert.

Formale Syntax

<repeating-radial-gradient()> = 
repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<radial-shape> =
circle |
ellipse

<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?

<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side

<length-percentage> =
<length> |
<percentage>

<linear-color-stop> =
<color> <length-percentage>?

<linear-color-hint> =
<length-percentage>

Beispiele

Schwarz-Weiß-Gradient

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

Farthest-corner

css
.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}

Der elliptische Gradient wird 20% von oben links zentriert und wiederholt sich 10 Mal zwischen Zentrum und der am weitesten entfernten Ecke (der unteren rechten Ecke). Browser, die mehrere Positionen von Farbstopps unterstützen, zeigen eine rot-grüne gestreifte Ellipse an. Browser, die die Syntax noch nicht unterstützen, sehen einen Verlauf, der von Rot zu Schwarz und dann von Blau zu Grün geht.

Interpolation mit Farbton

In diesem Beispiel zur Interpolation wird das HSL Farbensystem verwendet und der Farbton wird interpoliert.

css
.shorter {
  background-image: repeating-radial-gradient(
    circle at center in hsl shorter hue,
    red 30px,
    blue 60px
  );
}

.longer {
  background-image: repeating-radial-gradient(
    circle at center in hsl longer hue,
    red 30px,
    blue 60px
  );
}

Das linke Kästchen verwendet die kürzere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den kürzeren Bogen des Farbkreises geht. Das rechte Kästchen verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen geht und Grün, Gelb und Orange durchläuft.

Hinweis: Bitte sehen Sie unter Verwendung von CSS-Verläufen für weitere Beispiele nach.

Spezifikationen

Specification
CSS Images Module Level 3
# repeating-gradients

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
repeating-radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch