CSS/Funktionen/radial-gradient()

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

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
anwendbar auf	background-image, border-image, list-style-image, mask-image
Browsersupport	caniuse: css-gradients

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

 

Weblinks

• W3C: Radial Gradients: the radial-gradient() notation
• MDN: radial-gradient()

Siehe auch

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