CSS/Funktionen/conic-gradient()

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

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

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.

Weblinks

W3C: conic-gradients

Siehe auch

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