kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS conic gradients (gewinkelte Verläufe)

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.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.