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 angegeben, indem das Zentrum des Verlaufs (wo die 0%-Ellipse liegen wird) und die Größe und Form der Endform (die 100%-Ellipse) angegeben werden.

<position>

Die Position des Verlaufs, interpretiert auf die gleiche Weise wie background-position oder transform-origin. Wenn nichts angegeben ist, 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 achsen-ausgerichtete Ellipse ist) sein. Wenn nichts angegeben ist, ist der Standardwert ellipse.

<size>

Bestimmt die Größe der Endform des Verlaufs. Wenn es weggelassen wird, ist der Standardwert farthest-corner. Es kann explizit oder durch ein Schlüsselwort angegeben werden. Für die Zwecke der Schlüsselwortdefinitionen betrachten Sie die Kanten der Verlaufsbox als unendlich in beide Richtungen verlaufend, statt als endliche Liniensegmente.

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 berührt die Seite der Box, die dem Zentrum am nächsten liegt (für Kreise) oder berührt beide vertikalen und horizontalen Seiten, die dem Zentrum am nächsten sind (für Ellipsen).
closest-corner	Die Endform des Verlaufs ist so dimensioniert, dass sie genau die nächste Ecke der Box von ihrem Zentrum aus berührt.
farthest-side	Ähnlich wie closest-side, außer dass die Endform dimensioniert ist, um die von ihrem Zentrum aus entfernteste Seite der Box zu berühren (oder vertikale und horizontale Seiten).
farthest-corner	Der Standardwert, die Endform des Verlaufs ist so dimensioniert, dass sie genau die von ihrem Zentrum aus entfernteste Ecke der Box berührt.

Wenn <ending-shape> als circle angegeben ist, kann die Größe explizit als <length>, was einen expliziten Kreisradius bereitstellt, angegeben werden. 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 bereitzustellen. Der erste Wert repräsentiert den horizontalen Radius und der zweite den vertikalen Radius. Prozentwerte sind relativ zur entsprechenden Dimension der Verlaufsbox. Negative Werte sind ungültig.

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

<linear-color-stop>

Ein Farbwert des Verlaufshalts, gefolgt von einer oder zwei optionalen Stopppositionen (entweder ein <percentage> oder ein <length> entlang der Verlaufsachse). Ein Prozentsatz von 0% oder eine Länge von 0 stellt das Zentrum des Verlaufs dar; der Wert 100% stellt die Schnittstelle der Endform mit dem virtuellen Verlaufsstrahl dar. Die dazwischenliegenden Prozentwerte sind linear auf dem Verlaufsstrahl positioniert. Das Einschließen von zwei Stopppositionen entspricht der Angabe von zwei Farbverläufen mit derselben Farbe an den beiden Positionen.

<color-hint>

Der Farbe-Hinweis ist ein Interpolationstipp, der definiert, wie der Verlauf zwischen benachbarten Farbstopps verläuft. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlaufsfarbe die Mitte des Farbübergangs erreichen soll. Wenn er weggelassen wird, ist die Mitte des Farbübergangs die Mitte zwischen zwei Farbstops.

Wie bei jedem Verlauf hat ein radialer Verlauf keine intrinsischen Maße; d.h. er hat keine natürliche oder bevorzugte Größe oder 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 die Funktion repeating-radial-gradient().

Da <gradient>s zum Datentyp <image> 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 Datentyp <color> verwenden.

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

Um einen gleichmäßigen Verlauf zu erzeugen, zeichnet die radial-gradient()-Funktion eine Serie konzentrischer Formen, die vom Zentrum bis zur Endform (und möglicherweise darüber hinaus) strahlen. Die Endform kann entweder ein Kreis oder eine Ellipse sein.

Farbstopp-Punkte sind auf einem virtuellen Verlaufsstrahl positioniert, der sich horizontal vom Zentrum nach rechts erstreckt. Prozentsatzbasierte Farbstopp-Positionen sind relativ zur Schnittstelle zwischen der Endform und diesem Verlaufsstrahl, was 100% darstellt. Jede Form ist eine einzelne Farbe, bestimmt durch die Farbe auf dem Verlaufsstrahl, 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 zur Interpolation wird das hsl-Farbensystem 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 Farbkreis geht. Die Box auf der rechten Seite verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot über Grün, Gelb und Orange nach Blau geht, wobei sie den längeren Bogen durchläuft.

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

• Verwendung von CSS-Verläufen
• Andere Verlauf-Funktionen: 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()