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

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

Werte

<position>

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

<ending-shape>

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

<size>

Bestimmt die Größe der Endform des Verlaufs. Wenn weggelassen, wird standardmäßig farthest-corner verwendet. Es kann explizit oder durch ein Schlüsselwort angegeben werden. Für die Definitionen der Schlüsselwörter wird angenommen, dass sich die Kanten des Verlaufsfeldes unendlich in beide Richtungen erstrecken, 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 auf die Seite der Box, die dem Zentrum am nächsten liegt (bei Kreisen) oder trifft auf beide vertikalen und horizontalen Seiten, die dem Zentrum am nächsten liegen (bei Ellipsen).
`closest-corner`	Die Endform des Verlaufs ist so dimensioniert, dass sie genau die nächste Ecke der Box von ihrem Zentrum aus erreicht.
`farthest-side`	Ähnlich wie `closest-side`, ist jedoch die Endform so dimensioniert, dass sie die Seite der Box trifft, die am weitesten von ihrem Zentrum entfernt ist (oder vertikale und horizontale Seiten).
`farthest-corner`	Der Standardwert, die Endform des Verlaufs ist so dimensioniert, dass sie genau die am weitesten entfernte Ecke der Box von ihrem Zentrum aus erreicht.

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 bereitzustellen. Der erste Wert stellt den horizontalen Radius dar, und der zweite ist der vertikale Radius. Prozentwerte beziehen sich auf die entsprechende Dimension des Verlaufscontainers. Negative Werte sind ungültig.

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

<linear-color-stop>

Der <color> Wert eines Farbstopps, gefolgt von ein oder zwei optionalen Stopppositionen (entweder ein <percentage> oder eine <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% stellt den Schnittpunkt der Endform mit dem virtuellen Verlaufstrahl dar. Werte dazwischen werden linear auf der Verlaufslinie positioniert. Das Einfügen von zwei Stopppositionen entspricht der Angabe von zwei Farbstopps mit der gleichen Farbe an beiden Positionen.

<color-hint>

Der Color-Hint ist ein Interpolationshinweis, der definiert, wie der Verlauf zwischen zwei benachbarten Farbstopps fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlaufsfarbe den Mittelpunkt des Farbübergangs erreichen sollte. Wenn weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt 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 kein 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 <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 ist horizontal und beginnt vom Mittelpunkt. Der elliptische Verlauf und daher die Endform haben das gleiche Seitenverhältnis wie die Box, auf die sie angewendet werden.

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

Um einen reibungslosen Verlauf zu erstellen, zeichnet die Funktion radial-gradient() eine Reihe von konzentrischen Formen, die vom Mittelpunkt zur Endform (und möglicherweise darüber hinaus) ausstrahlen. Die Endform kann entweder ein Kreis oder eine Ellipse sein.

Farbstoppunkte sind auf einem virtuellen Verlaufstrahl positioniert, der sich horizontal vom Mittelpunkt nach rechts erstreckt. Prozentbasierte Farbstopppositionen beziehen sich auf den Schnittpunkt zwischen der Endform und diesem Verlaufstrahl, was 100% darstellt. Jede Form hat eine einheitliche Farbe, die von der Farbe auf dem Verlaufstrahl bestimmt wird, den 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 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%);
}

Verlauf, der nicht zentriert ist

<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 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 verwendet die kürzere Interpolation, d.h., die Farbe geht direkt von Rot zu Blau über die kürzere Strecke auf dem Farbkreis. Der Kasten rechts verwendet die längere Interpolation, d.h., die Farbe geht von Rot zu Blau über die längere Strecke und durchläuft Grün, Gelb und Orange.

Weitere Beispiele für radial-gradient

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

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

Help improve MDN

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

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