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 radial-gradient() CSS Funktion erstellt ein Bild, das aus einem progressiven Übergang zwischen zwei oder mehr Farben besteht, die von einem Ursprung ausstrahlen. Seine Form kann ein Kreis oder eine Ellipse sein. Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>, der eine spezielle Art von <image> ist.

Probieren Sie es aus

Syntax

css
/* 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 sein wird) sowie die Größe und Form der Endform (der 100%-Ellipse) angegeben werden.

Werte

<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 achsenausgerichtete 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 ein Schlüsselwort angegeben werden. Für die Definitionen der Schlüsselwörter ist zu bedenken, dass die Kanten des Verlaufsfeldes als unendlich in beide Richtungen verlaufend betrachtet werden, anstatt 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 trifft die dem Zentrum am nächsten gelegene Seite des Feldes (für Kreise) oder trifft sowohl die vertikalen als auch die 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 Ecke des Feldes trifft, die dem Zentrum am nächsten liegt.
farthest-side Ähnlich wie closest-side, außer dass die Endform so dimensioniert ist, dass sie die dem Zentrum oder den vertikalen und horizontalen Seiten am weitesten entfernte Seite trifft.
farthest-corner Der Standardwert; die Endform des Verlaufs ist so dimensioniert, dass sie genau die Ecke des Feldes trifft, die am weitesten vom Zentrum entfernt ist.

Wenn <ending-shape> als circle angegeben ist, kann die Größe explizit als <length> angegeben werden, was einen expliziten Kreisradius darstellt. 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 zu bestimmen. Der erste Wert repräsentiert den horizontalen Radius und der zweite den vertikalen Radius. Prozentwerte beziehen sich auf die entsprechende Dimension des Verlaufsfeldes. Negative Werte sind ungültig.

Wenn das <ending-shape>-Schlüsselwort weggelassen wird, wird die Form des Verlaufs durch die angegebene Größe bestimmt. Ein einzelner <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 <color>-Wert einer Farbunterbrechung, dem ein oder zwei optionale Unterbrechungspositionen folgen (entweder ein <percentage> oder ein <length> entlang der Achse des Verlaufs). Ein Prozentsatz von 0% oder eine Länge von 0 repräsentiert das Zentrum des Verlaufs; der Wert 100% repräsentiert den Schnittpunkt der Endform mit dem virtuellen Verlaufsstrahl. Prozentuale Werte dazwischen sind linear auf dem Verlaufsstrahl positioniert. Das Einfügen von zwei Unterbrechungspositionen entspricht der Deklaration von zwei Farbunterbrechungen mit derselben Farbe an den beiden Positionen.

<color-hint>

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

Beschreibung

Wie jeder Verlauf hat auch ein radialer Verlauf keine intrinsischen Abmessungen; das bedeutet, dass er keine natürliche oder bevorzugte Größe und kein bevorzugtes Verhältnis hat. Seine konkrete Größe wird an die Größe des Elements angepasst, auf das er angewendet wird.

Um einen radialen Verlauf zu erstellen, der sich so wiederholt, dass er seinen Behälter füllt, verwenden Sie 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 mit background-color und anderen Eigenschaften, die den Datentyp <color> verwenden.

Zusammensetzung eines radialen Verlaufs

Grafik, die radiale Verläufe erklärt: Der virtuelle Strahl ist horizontal und beginnt vom Mittelpunkt. Der elliptische Verlauf und deshalb auch die Endform haben das gleiche Verhältnis wie das Feld, auf dem sie deklariert sind.

Ein radialer Verlauf wird durch einen Zentrumpunkt, eine Endform und zwei oder mehr Farbunterbrechungspunkte definiert.

Um einen glatten Verlauf zu erstellen, zeichnet die Funktion radial-gradient() eine Reihe von konzentrischen Formen, die sich von der Mitte bis zur Endform (und potenziell darüber hinaus) ausstrahlen. Die Endform kann entweder ein Kreis oder eine Ellipse sein.

Farbunterbrechungspunkte sind auf einem virtuellen Verlaufsstrahl positioniert, der horizontal vom Zentrum nach rechts verläuft. Prozentuale Farbunterbrechungspositionen beziehen sich auf den Schnittpunkt zwischen der Endform und diesem Verlaufsstrahl, was 100% darstellt. Jede Form ist eine einzelne Farbe, die durch die Farbe auf dem Verlaufsstrahl bestimmt wird, die sie schneidet.

Formale Syntax

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

Beispiele

Einfacher Verlauf

css
.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

Nicht-zentrierter Verlauf

css
.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #f35 0%,
    #43e 100%
  );
}

Interpolation mit Farbton

In diesem Interpolationsbeispiel wird das hsl-Farbsystem verwendet und der Farbton wird interpoliert.

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

Der Kasten links benutzt kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen auf dem Farbkreis geht. Der Kasten rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen geht, und dabei Grün, Gelb und Orange durchläuft.

Weitere radial-gradient-Beispiele

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

Spezifikationen

Specification
CSS Images Module Level 3
# radial-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
radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)

Legend

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

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

Siehe auch