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 Verlauf wird durch Angabe des Zentrums des Verlaufs (wo die 0%-Ellipse sein wird) und der Größe und Form der Endform (der 100%-Ellipse) angegeben.

<position>

Die Position des Verlaufs, interpretiert in der gleichen Weise wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standardwert center.

<ending-shape>

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

<size>

Bestimmt die Größe der Endform des Verlaufs. Wenn weggelassen, ist der Standardwert "farthest-corner". Es kann explizit oder durch Schlüsselwort angegeben werden. Für die Definition der Schlüsselwörter wird angenommen, dass die Ränder der Verlaufsbox unendlich in beide Richtungen verlaufen, anstatt begrenzte Liniensegmente zu sein.

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

Schlüsselwort	Beschreibung
closest-side	Die Endform des Verlaufs erreicht die dem Zentrum am nächsten liegende Boxseite (für Kreise) oder berührt die beiden vertikalen und horizontalen Seiten, die dem Zentrum am nächsten liegen (für Ellipsen).
closest-corner	Die Endform des Verlaufs wird so dimensioniert, dass sie genau die nächste Ecke der Box von ihrem Zentrum aus erreicht.
farthest-side	Ähnlich wie closest-side, außer dass die Endform so dimensioniert ist, dass sie die Boxseite erreicht, die am weitesten von ihrem Zentrum entfernt ist (oder die vertikalen und horizontalen Seiten).
farthest-corner	Der Standardwert, die Endform des Verlaufs wird so dimensioniert, dass sie genau die am weitesten entfernte Ecke der Box von ihrem Zentrum erreicht.

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

Wenn <ending-shape> als ellipse angegeben ist, kann die Größe als <length-percentage> mit zwei Werten angegeben werden, um eine explizite Ellipsengröße anzugeben. Der erste Wert stellt den horizontalen Radius dar und der zweite den vertikalen Radius. Prozentwerte beziehen sich auf die entsprechende Dimension der Verlaufsbox. Negative Werte sind ungültig.

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

<linear-color-stop>

Ein <color>-Wert eines Farbhaltepunktes, gefolgt von einer oder zwei optionalen Stopp-Positionen (entweder ein <percentage> oder eine <length> entlang der Verlauflinie). Ein Prozentsatz von 0% oder eine Länge von 0 stellt das Zentrum des Verlaufs dar; der Wert 100% stellt den Schnittpunkt der Endform mit dem virtuellen Verlaufradius dar. Zwischenliegende Prozentwerte werden linear auf dem Verlaufradius positioniert. Zwei Stopp-Positionen sind gleichbedeutend mit der Deklaration von zwei Farbhaltepunkten mit derselben Farbe an den beiden Positionen.

<color-hint>

Der Farbhinweis ist ein Interpolationshinweis, der definiert, wie der Verlauf zwischen benachbarten Farbhaltenpunkten fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbhaltenpunkten die Verlaufslinie das mittlere Ende der Farbveränderung erreichen soll. Wenn es weggelassen wird, ist der Mittelpunkt der Farbveränderung der Mittelpunkt zwischen zwei Farbhaltenpunkten.

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

Um einen radialen Verlauf zu erstellen, der sich wiederholt, um seinen Container zu füllen, verwenden Sie stattdessen die repeating-radial-gradient() Funktion.

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.

!Grafik, die radiale Verläufe erklärt: Der virtuelle Strahl verläuft horizontal vom Mittelpunkt aus. Der elliptische Verlauf, und somit die Endform, hat das gleiche [Seitenverhältnis wie die Box, auf die er angewendet wird.](radial_gradient.png)

Ein radialer Verlauf wird durch einen Mittelpunkt, eine Endform und zwei oder mehr Farbhaltepunkt definiert.

Um einen fließenden Verlauf zu erzeugen, zeichnet die radial-gradient() Funktion eine Reihe von konzentrischen Formen, die sich vom Zentrum zur Endform (und möglicherweise darüber hinaus) ausbreiten. Die Endform kann entweder ein Kreis oder eine Ellipse sein.

Farbhaltepunkte sind auf einem virtuellen Verlaufradius positioniert, der horizontal von der Mitte nach rechts verläuft. Prozentsatzbasierte Farbhaltepunktpositionen beziehen sich auf den Schnittpunkt zwischen der Endform und diesem Verlaufradius, der 100% darstellt. Jede Form ist eine einfarbige Beschaffenheit, die durch die auf dem Verlaufradius befindliche Farbe bestimmt wird, die 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 auf der linken Seite verwendet die kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen auf dem Farbrad wechselt. Die Box auf der rechten Seite verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen wechselt, durch Grün-, Gelb- und Orangetöne.

Bitte sehen Sie CSS-Verläufe verwenden für weitere Beispiele.

• CSS-Verläufe verwenden
• Andere Verlaufsfunktionen: 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()