radial-gradient()

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)

/* hsl color space with longer hue interpolation */
radial-gradient(circle at center in hsl longer hue, red 0, blue, green 100%)

Ein radialer Gradient wird angegeben, indem das Zentrum des Gradienten (wo die 0%-Ellipse sein wird) sowie die Größe und Form der endenden Form (die 100%-Ellipse) angegeben werden.

<position>

Die Position des Gradienten wird genauso interpretiert wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standardwert center.

<ending-shape>

Die endende Form des Gradienten. Der Wert kann circle (bedeutet, die Form des Gradienten ist ein Kreis mit konstantem Radius) oder ellipse (bedeutet, die Form ist eine achsengerecht ausgerichtete Ellipse) sein. Wenn nicht angegeben, ist der Standardwert ellipse.

<size>

Bestimmt die Größe der endenden Form des Gradienten. Wenn weggelassen, ist der Standardwert farthest-corner. Dies kann explizit oder durch ein Schlüsselwort angegeben werden. Für die Definition der Schlüsselwörter werden die Kanten des Gradientenbox als unendlich in beide Richtungen verlaufend anstatt als endliche Liniensegmente betrachtet.

Sowohl Kreis- als auch Ellipsen-Gradienten akzeptieren die folgenden Schlüsselwörter für ihre <size>:

Schlüsselwort	Beschreibung
closest-side	Die endende Form des Gradienten trifft auf die Seite der Box, die dem Zentrum am nächsten ist (für Kreise) oder trifft auf die vertikalen und horizontalen Seiten, die dem Zentrum am nächsten sind (für Ellipsen).
closest-corner	Die endende Form des Gradienten ist so dimensioniert, dass sie genau die nächste Ecke der Box von ihrem Zentrum aus trifft.
farthest-side	Ähnlich wie closest-side, außer dass die endende Form so dimensioniert ist, dass sie die Seite der Box am weitesten von ihrem Zentrum entfernt trifft (oder vertikale und horizontale Seiten).
farthest-corner	Der Standardwert, die endende Form des Gradienten ist so dimensioniert, dass sie genau die am weitesten entfernte Ecke der Box von ihrem Zentrum aus trifft.

Wenn <ending-shape> als circle spezifiziert ist, kann die Größe explizit als <length> angegeben werden, was einen expliziten Kreisradius bereitstellt. Negative Werte sind ungültig.

Wenn <ending-shape> als ellipse spezifiziert ist, kann die Größe als <length-percentage> mit zwei Werten angegeben werden, um eine explizite Ellipsengröße bereitzustellen. Der erste Wert repräsentiert den horizontalen Radius und der zweite den vertikalen Radius. Prozentwerte sind relativ zur jeweiligen Dimension der Gradientenbox. Negative Werte sind ungültig.

Wenn das Schlüsselwort <ending-shape> weggelassen wird, wird die Form des Gradienten durch die angegebene Größe bestimmt. Ein <length>-Wert liefert einen Kreis, während zwei Werte in <length-percentage>-Einheiten eine Ellipse liefern. Ein einzelner <percentage>-Wert ist nicht gültig.

<linear-color-stop>

Ein Farbstopps' <color>-Wert, gefolgt von einer oder zwei optionalen Stopppositionen (entweder <percentage> oder <length> entlang der Achse des Gradienten). Ein Prozentwert von 0%, oder eine Länge von 0, repräsentiert das Zentrum des Gradienten; der Wert 100% repräsentiert den Schnittpunkt der endenden Form mit dem virtuellen Gradientenstrahl. Prozentwerte dazwischen sind linear auf dem Gradientenstrahl positioniert. Zwei Stopp-Positionen zu inkludieren ist äquivalent dazu, zwei Farbstopps mit derselben Farbe an den beiden Positionen zu deklarieren.

<color-hint>

Der Farbhinweis ist ein Interpolationshinweis, der definiert, wie der Gradient zwischen benachbarten Farbstopps fortschreitet. Die Länge bestimmt, an welchem Punkt zwischen zwei Farbstopps die Gradientfarbe den Mittelpunkt des Farbübergangs erreichen soll. Wenn weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbstopps.

Wie bei jedem Gradient hat ein radialer Gradient keine intrinsischen Abmessungen; d.h., er hat keine natürliche oder bevorzugte Größe, noch ein bevorzugtes Verhältnis. Seine konkrete Größe wird die Größe des Elements annehmen, auf das es angewendet wird.

Um einen radialen Gradient zu erstellen, der sich so wiederholt, dass er seinen Container ausfüllt, verwenden Sie stattdessen die Funktion repeating-radial-gradient().

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

Ein radialer Gradient wird durch einen Mittelpunkt, eine endende Form und zwei oder mehr Farbstopp-Punkte definiert.

Um einen fließenden Gradient zu erstellen, zeichnet die radial-gradient()-Funktion eine Serie von konzentrischen Formen, die vom Zentrum zur endenden Form (und möglicherweise darüber hinaus) strahlen. Die endende Form kann entweder ein Kreis oder eine Ellipse sein.

Farbstopp-Punkte sind auf einem virtuellen Gradientenstrahl positioniert, der sich horizontal vom Zentrum nach rechts erstreckt. Prozentbasierte Farbstopp-Positionen sind relativ zu der Schnittstelle zwischen der endenden Form und diesem Gradientenstrahl, welcher 100% repräsentiert. Jede Form ist eine einzelne Farbe, bestimmt durch die Farbe auf dem Gradientenstrahl, den sie schneidet.

<radial-gradient()> = 
  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>  

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

In diesem Beispiel für die Interpolation wird das hsl Farbsystem verwendet und der Farbton wird interpoliert.

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

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

Die Box links verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen auf dem Farbrad verläuft. Die Box rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen verläuft, der durch Grün, Gelb und Orange führt.

Bitte sehen Sie sich Verwendung von CSS-Gradienten für weitere Beispiele an.

• Verwendung von CSS-Gradienten
• Andere Gradientenfunktionen: repeating-radial-gradient(), linear-gradient(), repeating-linear-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()