Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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:

Beispiele der oben gezeigten Code-Snippets für CSS conic gradients
Screenshot der oben gezeigten Code-Snippets

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

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);
}
Screenshot der mit conic gradient erzeugten Muster-Effekte
Screenshot der mit conic gradient erzeugten Muster-Effekte

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%);
Screenshot des o.g. Snippets
Screenshot des o.g. Snippets

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

Benutzerbild

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

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →