CSS/Funktionen/radial-gradient()

Browserunterstützung
caniuse.com

Die CSS-Funktion radial-gradient() legt einen radialen Farbverlauf fest

anwendbar auf

background-image, border-image, list-style-image, mask-image

Parameter

Die Funktion erwartet folgende Argumente:

• eine Form (shape)
  • ellipse (Standardwert) oder circle

• eine Positionsangabe:
  • vergleichbar zu background-position oder transform-origin, Ausgangswert ist center

• mindestens zwei „Color-Stop“-Angaben
  • Ein „Color-Stop“ besteht aus einer Farb- und einer Längenangabe und legt fest, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.
  • Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind.
  • radial-gradient(red, green, red) = radial-gradient(red 0, green 50%, red 100%)
  • Auf die Angaben 0 und 100% kann grundsätzlich verzichtet werden, ggf. ebenso auf einen ersten und letzten Color-Stop.
  • radial-gradient(red 0, green 50%, red 100%) = radial-gradient(red, green 50%, red)
  • radial-gradient(red, red 25%, green 75%, green) = radial-gradient(red 25%, green 75%)
  • scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort

• die Größe der Endform (extent-keyword)
  • closest-side, Die Endform trifft auf die der Mitte nächstgelegene Seite (für circle) oder trifft auf vertikale und horizontale Seiten (für ellipse)
  • closest-corner, Endform trifft nächste Ecke
  • farthest-side, trifft auf die der Mitte am weitesten entfernten Seite
  • farthest-corner, (Standardwert) trifft auf die am weitesten entfernte Ecke

Beispiel

 #eins {
  background-image: radial-gradient(circle closest-side at center, gold 20%, yellow 30%, dimgray 60%);
}
#fuenf {
  background-image: radial-gradient(closest-side at center 70%, gold 20%, yellow 30%, dimgray 60%);
}

 

Siehe auch

• CSS/Tutorials/Hintergrund/Verläufe
  • radial-gradient()
• Tricks mit border-image Rahmen mit Verlauf
• Masken und Beschneidungen/Masken
  • mask-image Teiltransparente Bereiche

Weblinks

• W3C: Radial Gradients: the radial-gradient() notation
• MDN: radial-gradient()
• Browser-Support: caniuse.com