CSS-Funktion `radial-gradient()`

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die radial-gradient() CSS Funktion erstellt ein Bild, das aus einem fortschreitenden Ü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%,
  #333333,
  #333333 50%,
  #eeeeee 75%,
  #333333 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 radiales Gradient wird angegeben, indem das Zentrum des Gradienten (wo sich die 0% Ellipse befindet) sowie die Größe und Form der Endform (der 100% Ellipse) angegeben werden.

Werte

<position>

Die Position des Gradienten, interpretiert auf die gleiche Weise wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standardwert center.

<ending-shape>

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

<size>

Bestimmt die Größe der Endform des Gradienten. Wenn nicht angegeben, ist der Standardwert farthest-corner. Es kann explizit oder durch Schlüsselwort angegeben werden. Für die Definition der Schlüsselwörter sollten die Ränder des Gradientenrahmens als unbegrenzt in beide Richtungen verlaufend betrachtet werden, anstatt als endliche Linienstücke.

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

Schlüsselwort	Beschreibung
`closest-side`	Die Endform des Gradienten berührt die dem Zentrum am nächsten gelegene Seite des Rahmens (für Kreise) oder trifft auf beide vertikalen und horizontalen dem Zentrum am nächsten gelegenen Seiten (für Ellipsen).
`closest-corner`	Die Endform des Gradienten ist so bemessen, dass sie genau die dem Zentrum nächstgelegene Ecke des Rahmens erreicht.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die Endform so bemessen ist, dass sie die dem Zentrum am weitesten entfernte Seite des Rahmens (oder die vertikalen und horizontalen Seiten) erreicht.
`farthest-corner`	Der Standardwert, die Endform des Gradienten ist so bemessen, dass sie genau die dem Zentrum am weitesten gelegene Ecke des Rahmens erreicht.

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

Wenn <ending-shape> als ellipse angegeben wird, kann die Größe als <length-percentage> mit zwei Werten angegeben werden, um eine explizite Ellipsengröße zu liefern. Der erste Wert repräsentiert den horizontalen Radius und der zweite den vertikalen Radius. Prozentwerte beziehen sich auf die entsprechende Dimension des Gradientenrahmens. Negative Werte sind ungültig.

Wenn das <ending-shape>-Schlüsselwort weggelassen wird, wird die Form des Gradienten durch die angegebene Größe bestimmt. Ein einzelner <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 <color>-Wert eines Farbstopps, gefolgt von ein oder zwei optionalen Stopp-Positionen (entweder ein <percentage> oder ein <length> entlang der Gradientenachse). Ein Prozentsatz 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. Dazwischen liegende Prozentwerte sind linear auf dem Gradientenstrahl positioniert. Das Einschließen von zwei Stopp-Positionen ist gleichbedeutend mit der Deklaration 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 fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Übergangsfarbe den Mittelpunkt des Farbübergangs erreichen sollte. Wenn weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbstopps.

Beschreibung

Wie bei jedem Gradienten hat auch ein radialer Gradient keine intrinsischen Dimensionen; 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 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 auf background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Zusammensetzung eines radialen Gradienten

Grafik, die radiale Gradienten erklärt: Der virtuelle strahlende Strahl ist horizontal und beginnt vom Mittelpunkt. Der elliptische Gradient, und daher die Endform, hat dasselbe Seitenverhältnis wie der Kasten, auf den er angewendet wird.

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

Um einen sanften Farbverlauf zu erzeugen, zeichnet die radial-gradient()-Funktion eine Reihe von konzentrischen Formen, die vom Mittelpunkt 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 Gradientenstrahl positioniert, der horizontal vom Zentrum nach rechts verläuft. Prozentbasierte Farbstopp-Positionen beziehen sich auf den Schnittpunkt zwischen der Endform und diesem Gradientenstrahl, der 100% repräsentiert. Jede Form ist eine einzelne Farbe, bestimmt durch die Farbe auf dem Gradientenstrahl, die sie schneidet.

Formale Syntax

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

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

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<linear-color-stop> = 
  <color> <color-stop-length>?  

<linear-color-hint> = 
  <length-percentage>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}

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,
    #ff3355 0%,
    #4433ee 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 Beispiel für Interpolation wird das Farbsystem hsl 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
  );
}

Das Feld links verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von rot zu blau übergeht, unter Verwendung des kürzeren Bogens auf dem Farbkreis. Das Feld rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von rot zu blau übergeht, indem der längere Bogen durch Grün, Gelb und Orange durchquert wird.

Weitere Beispiele für radial-gradient

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

Spezifikationen

Spezifikation
CSS Images Module Level 3 # radial-gradients

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Gradienten
Andere Gradient-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()

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Funktion radial-gradient()

Help improve MDN

CSS-Funktion `radial-gradient()`