Conic Gradient in CSS — Kreisdiagramme und Farbräder
Mit CSS conic-gradient (kegelförmiger Verlauf) sind Gestaltungsmöglichkeiten entstanden, die früher nur mit SVG oder Canvas möglich waren: Kreisdiagramme, Farbräder, Fortschrittsringe und viele andere kreisförmige Designs. Der conic-gradient ist in allen modernen Browsern ohne Prefix unterstützt und öffnet eine neue Dimension in der CSS-Gestaltung. Der WikiPlus CSS-Gradient Generator bietet eine Basis für das Verstehen von Gradient-Konzepten, die auf conic-gradient übertragen werden können.
Was ist conic-gradient und wie funktioniert er?
Während linear-gradient Farben entlang einer Linie und radial-gradient von einem Punkt nach außen wechselt, rotiert conic-gradient die Farben um einen Mittelpunkt herum — wie die Zeiger einer Uhr. Die Basis-Syntax: background: conic-gradient(red, yellow, green, blue, red). Ohne Positionsangaben werden die Farben gleichmäßig auf 360 Grad verteilt. Der Mittelpunkt kann mit at angegeben werden: conic-gradient(from 0deg at 50% 50%, red, blue). Das from-Schlüsselwort definiert den Startwinkel. Mit Prozentwerten oder Grad-Angaben können Farbstopps positioniert werden: conic-gradient(red 0deg 90deg, green 90deg 180deg, blue 180deg 270deg, orange 270deg 360deg) — das erzeugt ein gleichmäßig in vier Farben unterteiltes Tortendiagramm. Alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen conic-gradient ohne Prefix.
Kreisdiagramme nur mit CSS erstellen
Eine der nützlichsten Anwendungen von conic-gradient ist das CSS-Kreisdiagramm ohne SVG oder JavaScript. Beispiel für ein Diagramm mit 60% Blau und 40% Orange: .pie-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#0011ff 0% 60%, #ff6600 60% 100%); }. Für ein Donut-Diagramm (Ring-Diagramm): .donut { background: conic-gradient(#0011ff 0% 60%, #ff6600 60% 100%); border-radius: 50%; } .donut::after { content: ''; display: block; width: 60%; height: 60%; background: white; border-radius: 50%; margin: 20% auto; }. Der innere Kreis wird durch ein Pseudo-Element mit weißem Hintergrund erstellt. Für dynamische Werte kann man CSS-Variablen mit conic-gradient kombinieren: background: conic-gradient(#0011ff calc(var(--percentage) * 1%), #eee 0).
Farbräder und Spektrum-Displays
conic-gradient eignet sich hervorragend für Farbrad-Visualisierungen. Ein vollständiges Farbrad: .color-wheel { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%), hsl(120, 100%, 50%), hsl(150, 100%, 50%), hsl(180, 100%, 50%), hsl(210, 100%, 50%), hsl(240, 100%, 50%), hsl(270, 100%, 50%), hsl(300, 100%, 50%), hsl(330, 100%, 50%), hsl(360, 100%, 50%)); }. Für ein realistischeres Farbrad mit Sättigungsabnahme zur Mitte kombiniert man conic-gradient mit radial-gradient: background: radial-gradient(circle, white, transparent), conic-gradient(hsl(0,100%,50%), hsl(360,100%,50%)). Diese Technik kann auch für Statusanzeigen, Timer-Visualisierungen und künstlerische Hintergründe genutzt werden.
Fortschrittsringe mit conic-gradient und CSS-Variablen
Fortschrittsringe (Progress Rings) sind eine elegante UI-Komponente, die häufig in Dashboards und Fitness-Apps verwendet wird. Mit conic-gradient und CSS-Variablen lassen sie sich ohne SVG implementieren. Grundstruktur: .progress-ring { --progress: 75; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#0011ff calc(var(--progress) * 1%), #e0e0e0 0); }. Für den Donut-Effekt: ::after { content: ''; position: absolute; inset: 15px; background: white; border-radius: 50%; }. Mit JavaScript kann man den --progress-Wert dynamisch setzen: element.style.setProperty('--progress', progressValue). Das ermöglicht animierte Fortschrittsanzeigen mit CSS-Transition: transition: --progress 0.5s ease. Dieser Ansatz ist deutlich einfacher als SVG-Stroke-Animationen und funktioniert in allen modernen Browsern.
Häufig gestellte Fragen
- Unterstützt CSS conic-gradient alle modernen Browser?
- Ja, conic-gradient ist seit 2021 in allen modernen Browsern (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+) ohne Vendor-Prefix verfügbar. Internet Explorer unterstützt es nicht — für IE11-Unterstützung muss ein SVG-Fallback verwendet werden.
- Wie erstelle ich einen conic-gradient mit weichen Übergängen statt harten Kanten?
- Füge zwischen den Farbstopps Zwischenwerte ein: conic-gradient(red 0deg, orange 30deg, yellow 90deg, green 180deg, blue 270deg, red 360deg). Je mehr Zwischenstopps, desto weicher der Übergang. Für sehr weiche Übergänge hilft auch filter: blur() auf einem Container.
- Kann ich conic-gradient für Animationen verwenden?
- Direktes Animieren von conic-gradient-Werten ist in CSS nicht elegant möglich. Der effizientste Ansatz für animierte Kreisdiagramme ist die Kombination mit CSS Custom Properties (@property) und CSS-Transitions, die die Variable animieren.