conic-gradient()

<angle>

In Verbindung mit dem Schlüsselwort from, und nimmt einen Winkel als Wert an, definiert die Drehung des Verlaufs im Uhrzeigersinn.

<position>

Verwendet die gleichen Längen-, Ordnungs- und Schlüsselwortwerte wie die background-position Eigenschaft. Der position-Wert definiert das Zentrum des Verlaufs. Wenn nicht angegeben, wird standardmäßig der Wert center verwendet, was bedeutet, dass der Verlauf zentriert wird.

<angular-color-stop>

Ein Farbunterbrechungspunkt mit einem <color>-Wert, gefolgt von einem oder zwei optionalen Stopp-Positionen, (ein <angle> entlang der Umfangsachse des Verlaufs).

<color-hint>

Ein Interpolations Hinweis, der definiert, wie der Verlauf zwischen benachbarten Farbunterbrechungspunkten fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbunterbrechungspunkten der Verlauf die Mitte des Farbübergangs erreichen soll. Wenn ausgelassen, ist die Mitte des Farbübergangs der Mittelpunkt zwischen zwei Farbunterbrechungspunkten.

Wie bei jedem Verlauf hat ein kegeliger Verlauf keine intrinsischen Dimensionen; d.h. er hat keine natürliche oder bevorzugte Größe und kein bevorzugtes Seitenverhältnis. Seine konkrete Größe entspricht der Größe des Elements, auf das er angewendet wird, oder der Größe des <image>, wenn diese auf etwas anderes als die Elementgröße festgelegt ist.

Um einen kegeligen Verlauf zu erstellen, der sich wiederholt, um eine 360-Grad-Drehung auszufüllen, verwenden Sie stattdessen die repeating-conic-gradient() Funktion.

Da <gradient>s zum <image> Datentyp gehören, können sie nur dort verwendet werden, wo <image> verwendet werden kann. Aus diesem Grund wird conic-gradient() nicht auf background-color und anderen Eigenschaften funktionieren, die den <color> Datentyp verwenden.

Die Syntax von conic-gradient ist ähnlich der von radial-gradient, aber die Farbunterbrechungspunkte sind um einen Gradientenbogen herum angeordnet, dem Umfang eines Kreises, anstatt auf der Gradientenlinie, die vom Zentrum des Verlaufs ausgeht. Bei kegelförmigen Verläufen ändern sich die Farben, als ob sie um das Zentrum eines Kreises gedreht werden, beginnend oben und im Uhrzeigersinn. In einem radialen Verlauf ändern sich die Farben vom Zentrum einer Ellipse ausgehend in alle Richtungen nach außen.

Ein kegeliger Verlauf wird durch Angabe eines Drehwinkels, des Zentrums des Verlaufs und dann durch Angabe einer Liste von Farbunterbrechungspunkten spezifiziert. Im Gegensatz zu linearen und radialen Verläufen, deren Farbunterbrechungspunkte durch Angabe einer <length> platziert werden, werden die Farbunterbrechungspunkte eines kegeligen Verlaufs mit einem Winkel spezifiziert. Einheiten sind unter anderem deg für Grad, grad für Neugrad, rad für Radiant, und turn für Drehungen. Es gibt 360 Grad, 400 Neugrad, 2π Radiant und 1 Drehung in einem Kreis. Browser, die kegelförmige Verläufe unterstützen, akzeptieren auch Prozentwerte, wobei 100% 360 Grad entsprechen, aber dies ist nicht in der Spezifikation enthalten.

Ähnlich wie bei radialen Verläufen bietet die kegelgradienten Syntax die Möglichkeit, das Zentrum des Verlaufs überall innerhalb oder sogar außerhalb des Bildes zu positionieren. Die Werte für die Position sind ähnlich der Syntax für 2-Wert background-position.

Der Gradientenbogen ist der Umfang des Verlaufs. Der Startpunkt des Verlaufs oder des Bogens ist Norden oder 12:00 Uhr. Der Verlauf wird dann um den from Winkel gedreht. Die Farben des Verlaufs werden durch die angewinkelten Farbunterbrechungspunkte, deren Startpunkte, Endpunkte und dazwischen, sowie optionale angewinkelte Farbunterbrechungspunkte bestimmt. Die Übergänge zwischen den Farben können mit Farbhints zwischen den angrenzenden Farben der Farbunterbrechungspunkte verändert werden.

Anpassung von Verläufen

Durch das Hinzufügen von mehr angewinkelten Farbunterbrechungspunkten auf dem Gradientenbogen können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbunterbrechungspunkts kann explizit durch Verwendung eines <angle> definiert werden. Wenn Sie den Ort eines Farbunterbrechungspunkts nicht angeben, wird er in der Mitte zwischen dem vorhergehenden und dem nachfolgenden platziert. Wenn Sie keinen Winkel für den ersten oder letzten Farbunterbrechungspunkt angeben, sind ihre Werte 0deg bzw. 360deg. Die folgenden beiden Verläufe sind gleichwertig:

conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

Standardmäßig gehen die Farben sanft von der Farbe an einem Farbunterbrechungspunkt zur Farbe am nächsten Farbunterbrechungspunkt über, wobei der Mittelpunkt zwischen den Farben der halbe Wegpunkt des Farbübergangs ist. Sie können diesen Mittelwert des Farbübergangs zu jedem Punkt zwischen zwei Farbunterbrechungspunkten verschieben, indem Sie einen Farbhint hinzufügen, der angibt, wo sich der Mitte des Farbübergangs befinden soll. Das folgende Beispiel ist solid Rot vom Start bis zur 10%-Markierung, geht über 80% der Drehung von Rot zu Blau, wobei die letzten 10% solid Blau sind. Der Mittelpunkt des Rot-zu-Blau-Verlaufwechsels befindet sich jedoch bei der 20%-Markierung anstatt bei der 50%-Markierung, wie es ohne den 80grad oder 20% Farbhint passiert wäre.

conic-gradient(red 40grad, 80grad, blue 360grad);

Wenn zwei oder mehr Farbunterbrechungspunkte an derselben Stelle sind, wird der Übergang eine harte Linie zwischen der ersten und letzten an dieser Stelle angegebenen Farben sein. Um kegelförmige Verläufe zur Erstellung von Kreisdiagrammen zu verwenden — was NICHT der richtige Weg ist, um Kreisdiagramme als Hintergrundbilder zu erstellen, da Hintergrundbilder nicht zugänglich sind — verwenden Sie harte Farbunterbrechungen, bei denen die Winkel für zwei benachbarte Farbunterbrechungspunkte gleich sind. Der einfachste Weg, dies zu tun, ist die Verwendung mehrerer Positions-Farbunterbrechungspunkte. Die folgenden beiden Deklarationen sind gleichwertig:

conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

Farbunterbrechungspunkte sollten in aufsteigender Reihenfolge aufgelistet werden. Nachfolgende Farbunterbrechungspunkte mit niedrigerem Wert überschreiben den Wert des vorherigen Farbunterbrechungspunkts und erzeugen einen harten Übergang. Das folgende Beispiel wechselt bei der 30%-Markierung von Rot zu Gelb und geht dann über 35% des Verlaufs von Gelb zu Blau über:

conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

Es gibt andere Effekte, die Sie mit kegelförmigen Verläufen erstellen können. Seltsamerweise ist ein Schachbrettmuster einer davon. Durch das Erstellen von Quadranten mit einem oberen linken und unteren rechten weißen Quadranten und unteren linken und oberen rechten schwarzen Quadranten und anschließendem Wiederholen des Verlaufs 16 Mal (viermal quer und viermal abwärts) können Sie ein Schachbrettmuster erstellen.

conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;

Und ja, Sie können verschiedene Winkelmaßeinheiten mischen, aber tun Sie es nicht. Das obige Beispiel ist schwer zu lesen.

<conic-gradient()> = 
  conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?  

<length-percentage> = 
  <length>      |
  <percentage>  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  

<color-stop-angle> = 
  <angle-percentage>{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>  

Browser bieten assistiver Technologie keine speziellen Informationen zu Hintergrundbildern. Dies ist vor allem für Screenreader wichtig, da ein Screenreader dessen Anwesenheit nicht ankündigen wird und somit seinen Benutzern nichts mitteilt. Während es möglich ist, Kreisdiagramme, Schachbretter und andere Effekte mit kegelförmigen Verläufen zu erstellen, bieten CSS-Bilder keinen nativen Weg, um Alternativtext zuzuweisen, und daher wird das Bild, das durch den kegelförmigen Verlauf dargestellt wird, für Screenreader-Benutzer nicht zugänglich sein. Wenn das Bild Informationen enthält, die für das Verständnis des gesamten Zwecks der Seite kritisch sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis von WCAG, Leitfaden 1.1 Erklärung
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis von WCAG 2.0

Dieses Beispiel verwendet mehrere Farbunterbrechungspunkte, wobei benachbarte Farben denselben Farbunterbrechungspunktwert haben und so einen gestreiften Effekt erzeugen.

div {
  width: 100px;
  height: 100px;
}

<div></div>

div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

<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 Interpolationsbeispiel wird das hsl Farbsystem verwendet und der Farbton wird interpoliert.

.shorter {
  background-image: conic-gradient(in hsl shorter hue, red, blue);
}

.longer {
  background-image: conic-gradient(in hsl longer hue, red, blue);
}

Das Feld links verwendet die kürzere Interpolation, was bedeutet, dass die Farbe direkt von Rot zu Blau über die kürzere Kurve auf dem Farbkreis geht. Das Feld rechts verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über die längere Kurve geht und dabei durch Grün, Gelb und Orange verläuft.

Bitte sehen Sie sich CSS-Verläufe verwenden für weitere Beispiele an.

• CSS-Verläufe verwenden
• Andere Verlausfunktionen: repeating-conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()