conic-gradient(): Fortgeschrittene Muster für Diagramme und Loader

1. Wie conic-gradient() sich von linear-gradient() und radial-gradient() unterscheidet

Ein linear-gradient() verläuft entlang einer geraden Achse, ein radial-gradient() strahlt konzentrisch von einem Mittelpunkt nach außen. conic-gradient() dagegen rotiert den Farbverlauf um einen festen Mittelpunkt, ähnlich wie der Zeiger einer Uhr, der sich einmal komplett um 360 Grad dreht. Farbstopps werden dabei nicht als Abstand vom Mittelpunkt, sondern als Winkel angegeben, typischerweise in Grad oder als Prozentsatz eines vollen Kreises.

Diese winkelbasierte Natur macht conic-gradient() von Natur aus geeignet für alles, was sich als Anteil eines Ganzen darstellen lässt, allen voran Tortendiagramme, bei denen jeder Segmentwinkel proportional zu einem Datenanteil ist. Wo linear-gradient() und radial-gradient() vor allem dekorative Hintergründe erzeugen, wird conic-gradient() damit zu einem echten Werkzeug für datengetriebene Visualisierung, ganz ohne SVG oder Canvas.

2. Ein einfaches Tortendiagramm mit harten Farbstopps

Der Trick für ein sauberes Tortendiagramm liegt in harten Farbübergängen statt weichen Verläufen: Wenn zwei aufeinanderfolgende Farbstopps denselben Winkel haben, springt die Farbe an dieser Stelle abrupt, statt weich zu verlaufen. Auf diese Weise lässt sich jedes Segment als exakter Winkelbereich mit einer einzigen, klar abgegrenzten Farbe definieren, genau wie bei einem klassischen Tortendiagramm aus einer Grafiksoftware.

Die Prozentangabe ist dabei besonders praktisch, weil sie direkt einem Datenanteil entspricht: 25% entsprechen einem Viertel des Kreises, 60% entsprechen 60 Prozent der Gesamtmenge. Das macht die Übersetzung von rohen Prozentwerten aus einem Datensatz in CSS-Werte trivial, ohne vorher in Grad umrechnen zu müssen.

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #7c3aed 0% 35%,
    #db2777 35% 60%,
    #0891b2 60% 85%,
    #ca8a04 85% 100%
  );
}

3. Ladeanimationen: ein rotierender Spinner ohne Bild oder SVG

Ein häufiges UI-Element ist der klassische Ladekreis, der sich dreht, während im Hintergrund eine Anfrage läuft. Mit conic-gradient() lässt sich dieser Effekt rein deklarativ erzeugen: Ein Verlauf von transparent zu einer Akzentfarbe, angewendet auf ein rundes Element mit einem transparenten inneren Kreis, kombiniert mit einer CSS-Animation, die die Rotation übernimmt, ergibt einen vollständigen Spinner ohne ein einziges Bild oder eine SVG-Datei.

Der innere transparente Kreis, meist über mask oder ein zusätzliches Pseudo-Element mit weißem Hintergrund erzeugt, verwandelt die volle Kreisfläche in einen dünnen Ring, wie man ihn von klassischen Ladeindikatoren kennt. Diese Technik spart nicht nur eine externe Bilddatei, sondern lässt sich auch beliebig in Größe und Farbe an das jeweilige Design-System anpassen, ohne ein neues Asset exportieren zu müssen.

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(transparent, #7c3aed);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: spin 0.8s linear infinite;
}

4. Ein vollständiges Farbrad als Hue-Selector

Weil HSL-Farbtöne selbst zyklisch von 0 bis 360 Grad verlaufen, lässt sich ein komplettes Farbrad mit einem einzigen conic-gradient() erzeugen, der den vollständigen Farbtonkreis in einem runden Element abbildet. Das eignet sich besonders für einen eigenen Hue-Slider in einem Farbwähler-Widget, bei dem Nutzer per Klick oder Drag direkt einen Farbton aus dem sichtbaren Rad auswählen sollen, ohne dass ein Bild oder eine generierte Grafik dafür nötig ist.

Der entscheidende Vorteil gegenüber einem statischen Farbrad-Bild ist, dass sich Sättigung und Helligkeit über zusätzliche CSS-Eigenschaften unabhängig steuern lassen, während der Farbton weiterhin exakt aus dem conic-gradient() abgeleitet wird. Kombiniert mit einem radial-gradient() für den Sättigungsverlauf von der Mitte nach außen entsteht sogar ein vollständiger zweidimensionaler Farbwähler ganz ohne externe Bilddatei.

.hue-wheel {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
    hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
    hsl(360 100% 50%)
  );
}

5. Dynamische Werte mit Custom Properties und JavaScript koppeln

Der eigentliche Mehrwert für Datenvisualisierung entsteht, wenn die Winkelwerte innerhalb des conic-gradient() nicht fest im Stylesheet stehen, sondern über eine Custom Property gesetzt werden, die JavaScript zur Laufzeit aktualisiert. Ein Fortschrittsbalken, der einen Prozentwert aus einer laufenden Berechnung anzeigt, muss dann nicht mehr das gesamte CSS neu schreiben, sondern lediglich eine einzige Zahl auf dem Element ändern.

Diese Kopplung funktioniert deshalb so gut, weil conic-gradient() Prozent- und Grad-Werte akzeptiert, die selbst wieder aus calc()-Ausdrücken mit Custom Properties zusammengesetzt sein können. JavaScript muss also weder die komplette Gradient-Syntax neu generieren noch DOM-Elemente austauschen, sondern setzt einfach element.style.setProperty('--progress', '73%'), und der Browser übernimmt den Rest der Neuberechnung.

.progress-ring {
  --progress: 0%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#16a34a var(--progress), #e2e8f0 0);
  transition: background 0.3s ease;
}

6. Praxisbeispiel: JavaScript aktualisiert den Fortschritt live

Im Zusammenspiel mit dem vorherigen Beispiel reicht auf der JavaScript-Seite eine einzige Zeile, um den Fortschrittswert zu aktualisieren, ganz ohne dass DOM-Elemente neu erzeugt oder Stylesheet-Regeln neu geschrieben werden müssten. Diese Trennung zwischen der reinen Datenaktualisierung in JavaScript und der visuellen Berechnung in CSS folgt demselben Prinzip wie bei den Bash-Mathefunktionen: Logik, die früher im Skript lag, wandert dort hin, wo sie am effizientesten ausgeführt wird.

Für Animationen zwischen zwei Fortschrittswerten sorgt zusätzlich die transition-Eigenschaft auf der background-Eigenschaft dafür, dass der Wechsel weich statt abrupt erfolgt, sofern der Browser Transitions auf Gradient-Werte unterstützt. Wo das nicht der Fall ist, springt der Fortschritt zwar ohne Animation direkt zum neuen Wert, bleibt aber trotzdem funktional korrekt.

<div class="progress-ring" id="ring"></div>

<script type="text/plain">
function setProgress(percent) {
  document.getElementById('ring').style.setProperty('--progress', percent + '%');
}
setProgress(73);
</script>

7. repeating-conic-gradient(): sich wiederholende Segmentmuster

Neben conic-gradient() existiert die Variante repeating-conic-gradient(), die ein definiertes Winkelmuster automatisch so oft wiederholt, bis der volle Kreis gefüllt ist. Das eignet sich besonders für schachbrettartige oder speichenartige Muster, bei denen eine sich wiederholende Sequenz von Farben um den Mittelpunkt herum entstehen soll, etwa für dekorative Hintergrundmuster oder gestreifte Warnindikatoren im Kreis.

Der Unterschied zu einem manuell mit vielen Farbstopps geschriebenen conic-gradient() liegt in der Kürze der Deklaration: Statt jedes einzelne Segment von Hand aufzulisten, definiert man nur ein einziges Wiederholungsmuster mit fester Winkelbreite, und der Browser übernimmt die Vervielfachung um den vollen Kreis automatisch.

.warning-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    #f59e0b 0deg 15deg,
    #1e293b 15deg 30deg
  );
}

8. Performance im Vergleich zu SVG und Canvas

conic-gradient() wird als reine CSS-Hintergrundeigenschaft von der Compositing-Engine des Browsers gerendert, ohne dass dafür ein separates DOM-Element mit SVG-Pfaden oder ein Canvas-Kontext mit manuellem Zeichenbefehl nötig wäre. Für einfache Diagramme und Loader ist das in der Regel die leichtgewichtigere Lösung, weil kein zusätzlicher Rendering-Kontext aufgebaut und keine JavaScript-Zeichenlogik pro Frame ausgeführt werden muss.

Für sehr komplexe Datenvisualisierungen mit vielen interaktiven Segmenten, Tooltips pro Segment oder komplizierten Übergangsanimationen stößt conic-gradient() allerdings an eine Grenze, weil es nur ein Hintergrundbild ist und keine einzelnen Segmente als eigenständige, mit Events versehene DOM-Knoten anbietet. Für ein einfaches, statisches oder leicht animiertes Tortendiagramm bleibt conic-gradient() trotzdem die schlankere und wartungsärmere Wahl.

9. Browser-Support und Einsatzreife

conic-gradient() wird von allen aktuellen Versionen von Chrome, Edge, Firefox und Safari vollständig unterstützt und gilt seit mehreren Jahren als stabiles, produktionsreifes Feature ohne nennenswerte Einschränkungen. Für die meisten Projekte ist damit kein spezielles Fallback-Handling nötig, anders als bei den neueren, teils noch experimentellen CSS-Funktionen wie calc-size().

Wer dennoch sehr alte Browser-Versionen unterstützen muss, kann mit @supports (background: conic-gradient(red, blue)) gezielt prüfen und für den Ausnahmefall auf ein statisches Bild als Fallback zurückgreifen. In der Praxis ist dieser Fall bei conic-gradient() heute jedoch selten geworden, weil die Funktion breit genug unterstützt wird.

10. Zusammenfassung

11. FAQ: conic-gradient() in CSS: Das Wichtigste auf einen Blick