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 schrittweisen Übergang zwischen zwei oder mehr Farben besteht, die von einem Ursprung aus strahlen. Ihre 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

background: radial-gradient(#e66465, #9198e5);

background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

background:
  radial-gradient(ellipse at top, #e66465, transparent),
  radial-gradient(ellipse at bottom, #4d9f0c, transparent);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Syntax

css

/* A gradient with a single color of red */
radial-gradient(red)

/* 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 Radialgradient wird angegeben, indem das Zentrum des Gradienten (wo die Ellipse von 0 % sein wird) und die Größe sowie die Form der Endform (die Ellipse von 100 %) angegeben werden.

Werte

<position>

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

<ending-shape>

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

<size>

Bestimmt die Größe der Endform des Gradienten. Falls nicht angegeben, ist der Standardwert farthest-corner. Sie kann explizit oder per Schlüsselwort angegeben werden. Für die Definitionen der Schlüsselwörter berücksichtigen Sie, dass die Kanten des Gradientenfeldes sich in beide Richtungen unendlich erstrecken, anstatt begrenzte Liniensegmente zu sein.

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

Schlüsselwort	Beschreibung
`closest-side`	Die Endform des Gradienten trifft die Seite des Kastens, die dem Zentrum am nächsten liegt (für Kreise) oder trifft beide vertikalen und horizontalen Seiten, die dem Zentrum am nächsten liegen (für Ellipsen).
`closest-corner`	Die Endform des Gradienten wird so dimensioniert, dass sie genau die nächste Ecke des Kastens von seinem Zentrum trifft.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die Endform so dimensioniert wird, dass sie die Seite des Kastens trifft, die von seinem Zentrum am weitesten entfernt ist (oder vertikale und horizontale Seiten).
`farthest-corner`	Der Standardwert, die Endform des Gradienten wird so dimensioniert, dass sie genau die entfernteste Ecke des Kastens von seinem Zentrum trifft.

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

Wenn das <ending-shape>-Schlüsselwort weggelassen wird, wird die Gradientform 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 zulässig.

<linear-color-stop>

Der <color>-Wert eines Farbstopps, gefolgt von einer oder zwei optionalen Stopp-Positionen (entweder ein <percentage> oder ein <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 Endform mit dem virtuellen Gradientenstrahl. Prozentwerte dazwischen sind auf dem Gradientenstrahl linear positioniert. Das Einschließen von zwei Stopp-Positionen entspricht dem Deklarieren von zwei Farbstopps mit derselben Farbe an den beiden Positionen.

<color-hint>

Der Farbhinweis ist ein Interpolationshinweis, der definiert, wie der Gradient zwischen benachbarten Farbstopps voranschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Gradientenfarbe den Mittelpunkt des Farbübergangs erreichen sollte. Wenn sie weggelassen wird, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbstopps.

Beschreibung

Wie bei jedem Gradienten 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 entspricht der Größe des Elements, auf das er angewendet wird.

Um einen radialen Gradienten zu erstellen, der sich wiederholt, um seinen Container zu füllen, 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 bei background-color und anderen Eigenschaften, die den <color>-Datentyp verwenden.

Zusammensetzung eines radialen Gradienten

Grafik, die radiale Verläufe erklärt: Der virtuelle Strahl beginnt horizontal vom Mittelpunkt. Der elliptische Verlauf, und daher die Endform, hat dasselbe Seitenverhältnis wie das Feld, auf dem er deklariert wird.

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

Um einen glatten Verlauf zu erzeugen, zeichnet die radial-gradient()-Funktion eine Serie von konzentrischen Formen, die vom Mittelpunkt 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 Gradientenstrahl positioniert, der horizontal vom Mittelpunkt nach rechts verläuft. Prozentbasierte Farbstopppositionen sind relativ zum Schnittpunkt zwischen der Endform und diesem Gradientenstrahl, der 100% repräsentiert. Jede Form ist eine einzige Farbe, die durch die Farbe auf dem Gradientenstrahl bestimmt wird, den 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 Gradient

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

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

Nicht zentrierter Gradient

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

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

Interpolation mit Farbton

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

Die Box links verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über den kürzeren Bogen des Farbkreises wechselt. Die Box rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen wechselt und durch Grüntöne, Gelbtöne und Orangetöne führt.

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

Siehe auch

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