CSS/Funktionen/conic-gradient()

Browserunterstützung
caniuse.com

Die CSS-Funktion conic-gradient() legt einen konischen (kegelförmigen) Farbverlauf fest

anwendbar auf

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

Parameter

* mindestens zwei color-stops mit einer Farb- und einer optionalen Längenangabe, der festlegt, 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.

• ein optionales Winkelmaß, das den Beginn festlegt und mit from eingeleitet wird. (Standardwert 0: Verlauf beginnt oben)
• eine background-position entsprechende Positionsangabe, die das Zentrum des Verlaufs festlegt (Standardwert center center)

Beispiel

.conic-gradient-sw {
  background: 
    conic-gradient(black, #fff, #000);
}

Der Verlauf dreht sich im Uhrzeigersinn von schwarz zu weiß und zurück zu schwarz.

Siehe auch

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

Weblinks

W3C: conic-gradients

• Browser-Support: caniuse.com