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 ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die radial-gradient() CSS Funktion erzeugt ein Bild, das aus einem progressiven Ü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>, eine spezielle Art von <image>.

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

Werte

<position>

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

<ending-shape>

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

<size>

Bestimmt die Größe der Endform des Verlaufs. Wenn ausgelassen, ist der Standardwert farthest-corner. Es kann explizit oder durch Schlüsselwort angegeben werden. Bei der Definition der Schlüsselwörter sind die Kanten des Verlaufsrahmens als ins Unendliche in beide Richtungen verlaufend zu betrachten, 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 erreicht die dem Zentrum nächstgelegene Seite des Kastens (bei Kreisen) oder erreicht sowohl die vertikalen als auch horizontalen Seiten, die dem Zentrum am nächsten sind (bei Ellipsen).
`closest-corner`	Die Endform des Verlaufs ist so bemessen, dass sie genau die dem Zentrum nächstgelegene Ecke des Kastens erreicht.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die Endform bemessen ist, um die dem Zentrum am weitesten entfernte Seite des Kastens zu erreichen (oder die vertikalen und horizontalen Seiten).
`farthest-corner`	Der Standardwert, die Endform des Verlaufs ist so bemessen, dass sie genau die dem Zentrum am weitesten entfernte Ecke des Kastens erreicht.

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

Wenn das <ending-shape> Schlüsselwort weggelassen wird, wird die Verlaufsform 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>

Der <color>-Wert eines Farbstopps, gefolgt von einer oder zwei optionalen Stopp-Positionen (entweder einem <percentage> oder einem <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 Einbeziehen 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 Verlauf zwischen benachbarten Farbstopps fortschreiten soll. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps der Verlauf die Mitte des Farbübergangs erreichen sollte. Wenn ausgelassen, ist der Mittelpunkt des Farbübergangs die Mitte zwischen zwei Farbstopps.

Beschreibung

Wie bei jedem Verlauf hat ein radialer Verlauf keine intrinsischen Dimensionen; d.h. er hat keine natürliche oder bevorzugte Größe und auch kein bevorzugtes Verhältnis. Seine konkrete Größe entspricht der Größe des Elements, 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 <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 Verlaufs

Grafik, die radiale Verläufe erklärt: Der virtuelle Strahl erstreckt sich horizontal vom Mittelpunkt. Der elliptische Verlauf und somit die Endform haben dasselbe Seitenverhältnis wie das Kästchen, auf das sie angewendet werden.

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

Um einen sanften Verlauf zu erzeugen, zeichnet die radial-gradient()-Funktion eine Reihe konzentrischer Formen, die vom Zentrum zur Endform (und möglicherweise darüber hinaus) abstrahlen. Die Endform kann entweder ein Kreis oder eine Ellipse sein.

Farbstopppunkte sind auf einem virtuellen Verlaufsstrahl positioniert, der sich horizontal vom Zentrum nach rechts erstreckt. Prozentsatzbasierte Positionen von Farbstopps sind relativ zum Schnittpunkt zwischen der Endform und diesem Verlaufsstrahl, der 100% darstellt. Jede Form ist eine einfarbige Fläche, 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-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

Einfache Verlauf

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

<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 zur Interpolation 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 wechselt, indem sie den kürzeren Bogen auf dem Farbkreis nutzt. Die Box rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen wechselt und dabei durch Grün, Gelb und Orange geht.

Weitere Beispiele für radial-gradient

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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