CSS conic gradients (gewinkelte Verläufe)

Von: Jonas

Mit der conic-gradients()-Funktion von CSS lassen sich Tortendiagramme und komplexe Muster herstellen.

Aktualisiert von 2019 – 2023

Gewinkelte Verläufe gehören in vielen Grafik- und Bild­bearbeitungs­programmen zur Standard-Ausstattung. Sie ermöglichen zahlreiche grafisch ansprechende Effekte, die mit linearen oder radialen Verläufen nicht möglich sind. In CSS könnt ihr gewinkelte Verläufe mit der conic-gradient()-Funktion erzeugen.

Konische Verläufe als background-image

Wie alle CSS-Verläufe, werden auch konische Verläufe als background-image interpretiert. Die Funktion conic-gradient() erwartet mindestens zwei Farben. Der folgende Code erzeugt ein gewinkelter Verlauf mit einem Startpunkt oben in der Mitte.

background-image: conic-gradient(red, blue);

Wenn der Mittelpunkt verschoben werden soll, kann dies über das Schlüsselwort at sowie darauf folgende X- und Y-Koordinaten erreicht werden – ähnlich wie bei anderen CSS-Funktionen.

background-image: conic-gradient(at 25% 25%, red, blue);

Auch der Startpunkt des Winkels kann verändert werden – in diesem Fall wird das Schlüsselwort from, sowie ein Winkel in Grad (Degree = deg) angegeben.

background-image: conic-gradient(from 90deg, red, blue);

Die oben gezeigten Beispiele erzeugen folgende Ergebnisse:

Tortendiagramme mit CSS Conic Gradients

Wenn innerhalb eines Verlaufs – unabhängig davon, ob es sich um einen radialen, einen linearen oder einen gewinkelten Verlauf handelt – zwei aufeinander folgende Farbunterbrechungen auf die gleiche Position gesetzt werden, entsteht eine scharfe Kante. Da ein Verlauf Positionsangaben in Prozent (0 – 100%) erwartet, lassen sich sehr einfach präzise Tortendiagramme erstellen.

.pie-01 {
  border-radius: 100%;
  background: conic-gradient(red, red 15%, blue 15%, blue);
}

.pie-02 {
  border-radius: 100%;
  background: conic-gradient(red, red 15%, blue 15%, blue 70%, gold 70%, gold 100%);
}

Muster und Effekte

Neben Tortendiagrammen können auch Schachbrett-Muster, Strahlen-Effekte und andere interessante Muster erzeugt werden. In Kombination mit background-size kann der Effekt vervielfältigt werden.

.pattern-01 {
  background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue);
}

.pattern-02 {
  background: conic-gradient(red, red 25%, gold 25%, gold 50%, lime 50%, lime 75%, blue 75%, blue);
  background-size: 25% 25%;
}

.pattern-03 {
  background: conic-gradient(red, red 10%, blue 10%, blue 20%, red 20%, red 30%, blue 30%, blue 40%, red 40%, red 50%, blue 50%, blue 60%, red 60%, red 70%, blue 70%, blue 80%, red 80%, red 90%, blue 90%, blue);
}

Repeating Conic Gradients

Wie bei linearen und radialen CSS-Verläufen, steht auch bei konischen Verläufen die verwandte Funktion repeating-conic-gradient() zur Verfügung. Sobald hier ein Endpunkt für den Verlauf gesetzt wurde, wird der Verlauf wiederholt. Somit sind deutlich komplexere Effekte möglich – insbesondere, wenn zusätzlich mit background-size der Hintergrund verkleinert und gekachelt wird.

background: repeating-conic-gradient(red, blue 10%);

Demo aller Beispiele anzeigen

Browser-Support

Der Browser-Support ist zum Veröffentlichungszeitpunkt dieses Beitrags auf Chrome beschränkt – Safari hat die Funktion angekündigt. Den stets aktuellen Browsersupport entnehmt ihr bitte caniuse.com.

Für nicht-kompatible Browser existiert jedoch ein gut funktionierendes JavaScript-Polyfill.

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing