Conic Gradient CSS: Eine visuelle Anleitung

Ein konischer Verlauf in CSS dreht Farben um einen Mittelpunkt wie ein Uhrzeiger, der über das Zifferblatt streicht, anstatt sie in einer geraden Linie zu mischen oder ringförmig nach außen strahlen zu lassen. Dieser einzige Unterschied ermöglicht es conic-gradient(), Farbkreise, Tortendiagramme, Fortschrittsringe und scharfe Winkelmuster zu erstellen, die lineare und radiale Verläufe einfach nicht erzeugen können. Diese Anleitung gibt Ihnen zuerst das mentale Modell, dann praktische Rezepte mit kopierfertigem Code.

Wenn Sie bisher nur linear-gradient() verwendet haben, wirkt die konische Version zunächst seltsam. Der Trick ist, aufzuhören, über Entfernung nachzudenken, und stattdessen über Winkel nachzudenken. Sobald das klickt, eröffnet sich eine ganze Kategorie von Effekten ohne Bilder, SVG oder JavaScript.

Was ein konischer Verlauf tatsächlich bewirkt#

conic-gradient() platziert Farbstopps um einen Mittelpunkt herum nach Winkel und verläuft im Uhrzeigersinn von einer Startrichtung aus. Stellen Sie sich einen Kuchen vor, der in Stücke geschnitten wird: Jeder Farbstopp ist ein Schnitt, und der Bereich zwischen zwei Schnitten füllt sich mit einem Farbverlauf (oder einer harten Kante, wenn die Stopps aneinanderstoßen). Die Farben rotieren um den Mittelpunkt, anstatt sich von ihm wegzubewegen.

Das ist der entscheidende Unterschied, den Anfänger übersehen. Ein radialer Verlauf strahlt aus: Farben ändern sich, wenn Sie sich vom Mittelpunkt weg bewegen. Ein konischer Verlauf rotiert: Farben ändern sich, wenn Sie um den Mittelpunkt herum schwenken. Gleicher Mittelpunkt, völlig andere Bewegung.

Verlaufstyp	Farbänderung durch	Typische Verwendung
linear-gradient()	Entfernung entlang einer Linie	Hintergründe, Schaltflächen, Übergänge
radial-gradient()	Entfernung vom Mittelpunkt (Ringe)	Scheinwerfer, weiche Kugeln, Vignetten
conic-gradient()	Winkel um den Mittelpunkt (Schwenk)	Farbkreise, Tortendiagramme, Fortschrittsringe

Merkhilfe: linear bewegt, radial strahlt aus, konisch dreht sich. Wenn Ihr Effekt etwas wie eine Uhr, ein Rad oder ein Kuchenstück benötigt, brauchen Sie konisch.

Die grundlegende Syntax#

Die minimale Form nimmt eine Liste von Farbstopps, genau wie andere Verläufe:

background: conic-gradient(red, yellow, green, blue, red);

Dieser Verlauf durchläuft die Farben beginnend von oben (12 Uhr) im Uhrzeigersinn zurück zum Start. Die Wiederholung der ersten Farbe (red) am Ende schließt den Kreis, sodass keine harte Naht entsteht, wo der Schwenk sich schließt.

Sie sollten fast immer auch einen Mittelpunkt setzen, da die Standardeinstellung das gesamte Element füllt und der Schwenkursprung exakt in der Mitte liegt. Diese beiden Parameter werden wir als nächstes anpassen.

So erstellen Sie einen konischen Farbverlauf Schritt für Schritt#

Hier ist die praktische Bauanleitung. Befolgen Sie diese Schritte und Sie können jeden konischen Effekt erzeugen, von einem sanften Farbkreis bis zu einem segmentierten Kreisdiagramm.

Schritt 1: Legen Sie den Startwinkel mit from fest#

Standardmäßig beginnt der Verlauf nach oben (in Richtung 12 Uhr). Das Schlüsselwort from dreht diesen Ursprung. Verwenden Sie es, wenn eine Farbe an einer bestimmten Uhrzeitposition beginnen soll.

/* Der Verlauf beginnt nach rechts (3 Uhr) statt nach oben */
background: conic-gradient(from 90deg, red, blue, red);

Winkel vergrößern sich im Uhrzeigersinn. 0deg ist oben, 90deg rechts, 180deg unten, 270deg links. Wenn ein Kreis verdreht aussieht, passen Sie from an, anstatt jeden Farbstopp neu anzuordnen.

Schritt 2: Verschieben Sie den Mittelpunkt mit at#

Der Ursprung des Verlaufs ist standardmäßig die Elementmitte (50% 50%). Das Schlüsselwort at positioniert ihn neu, genau wie bei radial-gradient. Dies ist wichtig für außermittige Effekte und um nur einen Teil eines Elements zu schneiden.

/* Ursprung in der oberen linken Ecke */
background: conic-gradient(from 0deg at 25% 25%, orange, purple, orange);

Sie können from und at in einem Ausdruck kombinieren: conic-gradient(from 45deg at 30% 70%, ...). Die Reihenfolge ist wichtig: from kommt vor at.

Schritt 3: Platzieren Sie Farbstopps bei exakten Graden#

Hier werden konische Verläufe leistungsstark. Anstatt Farben gleichmäßig zu mischen, geben Sie jedem Stopp einen Winkel, sodass Sie genau steuern, wo er sitzt. Winkel verlaufen von 0deg bis 360deg um den Kreis.

background: conic-gradient(
  red 0deg,
  red 120deg,
  green 120deg,
  green 240deg,
  blue 240deg,
  blue 360deg
);

Beachten Sie, dass jede Farbe zweimal am gleichen Winkelpaar deklariert wird. red füllt 0deg bis 120deg, dann übernimmt green an der identischen 120deg-Marke. Diese gemeinsame Grenze ist das Geheimnis für den nächsten Schritt.

Schritt 4: Erstellen Sie harte Kanten für Scheiben und Kreisdiagramme#

Wenn zwei Farbstopps denselben Winkel teilen, hat der Verlauf keinen Raum zum Mischen, sodass Sie eine scharfe Linie statt eines Übergangs erhalten. So verwandeln Sie einen sanften Verlauf in saubere Keile. Der Code in Schritt 3 macht dies bereits: drei gleiche 120-Grad-Scheiben mit harten Kanten dazwischen.

Um ein Kreisdiagramm zu erstellen, setzen Sie den Winkel jedes Stopps basierend auf seinem Anteil an 360 Grad. Eine 25%-Scheibe endet bei 90deg, eine 50%-Scheibe bei 180deg und so weiter.

/* 50% blau, 30% türkis, 20% bernstein */
background: conic-gradient(
  #2563eb 0deg 180deg,   /* 50% */
  #14b8a6 180deg 288deg, /* 30% */
  #f59e0b 288deg 360deg  /* 20% */
);
border-radius: 50%; /* Quadrat in einen Kreis schneiden */

Die Kurzform Farbe Startwinkel Endwinkel ist sauberer als die Farbe zu wiederholen, und moderne Browser unterstützen sie. Fügen Sie border-radius: 50% hinzu, um die quadratische Box in einen echten Kreis zu schneiden.

Schritt 5: Erstellen Sie einen sanften Farbkreis#

Für einen vollständigen Farbkreis durchlaufen Sie das Farbspektrum mit HSL und lassen Sie die Farben ohne harte Stopps ineinander übergehen. Dies ist das klassische konische Prunkstück.

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

Die Wiederholung von hsl(0 ...) als hsl(360 ...) schließt den Kreis nahtlos, da Farbton 0 und Farbton 360 dasselbe Rot sind. Passen Sie Sättigung und Helligkeit an, um den gesamten Kreis pastellfarben oder leuchtend zu gestalten.

Diese Winkel von Hand richtig zu setzen ist mühsam, besonders bei mehrfarbigen Kreisen und ungleichen Torten. Anstatt Grade im Kopf zu zählen, erstellen Sie es visuell mit unserem kostenlosen CSS-Verlaufsgenerator, ziehen Sie die Stopps, bis es richtig aussieht, und kopieren Sie produktionsreifes CSS direkt heraus.

Wiederholende konische Verläufe und Muster#

Fügen Sie das Präfix repeating- hinzu, und die Sweep-Kacheln wiederholen sich so oft um den Kreis, wie es die Winkelberechnung erlaubt. So erhalten Sie Sonnenstrahlen, Radarsweeps und Starburst-Hintergründe mit einer einzigen kurzen Deklaration.

/* 12-speichiger Starburst */
background: repeating-conic-gradient(
  #111 0deg 15deg,
  #fff 15deg 30deg
);

Jedes 30-Grad-Segment (15 schwarz, 15 weiß) wiederholt sich zwölfmal, um die vollen 360 Grad zu füllen. Ändern Sie die Segmentbreite, um die Anzahl der Speichen anzupassen.

Der Schachbrett-Trick#

Eines der nützlichsten konischen Muster ist das Schachbrett, wie man es hinter transparenten Bildern in Editoren sieht. Es entsteht aus einem einzigen konischen Verlauf, der als kleines Hintergrundkachel wiederholt wird.

.checker {
  background: conic-gradient(
    #ccc 0deg 90deg,
    #fff 90deg 180deg,
    #ccc 180deg 270deg,
    #fff 270deg 360deg
  );
  background-size: 24px 24px;
}

Die vier Quadranten wechseln zwischen Grau und Weiß, und background-size verkleinert den Verlauf zu einer sich wiederholenden Kachel. Das ist weitaus leichter als ein PNG und skaliert unendlich. Falls Sie für einen alten E-Mail-Client oder eine Legacy-App eine Rasterversion eines Musters benötigen, können Sie das CSS jederzeit in ein Bild rendern. Unser SVG-zu-PNG-Konverter erledigt diesen Export sauber.

Fortschrittsringe erstellen#

Ein konischer Verlauf plus eine kreisförmige Maske ergibt einen Donut-förmigen Fortschrittsindikator ohne JavaScript für die visuelle Darstellung.

.progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0deg 252deg, #e5e7eb 252deg 360deg);
}

Hier entsprechen 252deg 70% von 360, sodass der grüne Bogen 70% Fortschritt anzeigt. Aktualisieren Sie diesen einzelnen Winkel mit einer CSS-Variable, und der Ring füllt sich live. Stechen Sie ein Loch in die Mitte mit einem kleineren absolut positionierten Kreis, und Sie haben einen sauberen Ringmesser.

Browser-Support und praktische Fallstricke#

conic-gradient() wird seit etwa 2020 von allen gängigen Evergreen-Browsern (Chrome, Edge, Firefox, Safari) unterstützt. Für aktuelle Zielgruppen können Sie es also ohne Fallback verwenden. Planungswürdig sind ältere Enterprise-Browser und E-Mail-Clients, bei denen die Gradientenunterstützung generell lückenhaft ist.

Einige Dinge, die oft zu Problemen führen:

• Es füllt die Box, keinen Kreis. Ein konischer Gradient auf einem quadratischen Element bleibt quadratisch, bis Sie border-radius: 50% hinzufügen. Der Verlauf ist kreisförmig, der bemalte Bereich nicht.
• Harte Kanten benötigen passende Winkel. Eine schwache unscharfe Linie zwischen Segmenten bedeutet, dass Ihre beiden Stopps einen Bruchteil eines Grads auseinander liegen. Machen Sie sie identisch, z.B. red 120deg, green 120deg.
• Winkel, nicht Prozent, für die Position. Konische Stopps verwenden deg (oder turn und rad). Die Mischung mit % funktioniert in neueren Engines, aber deg ist die klare, portable Wahl.
• turn-Einheiten sind übersichtlich. 0.5turn entspricht 180deg. Für Kreisdiagramme liest sich turn natürlicher: ein Viertelsegment ist 0.25turn.

Warnung: Verlassen Sie sich nicht auf einen konischen Gradienten als einzige Möglichkeit, Daten in einem Diagramm darzustellen. Kombinieren Sie das Kreis- oder Ringdiagramm mit einem Textlabel oder einer Legende, damit die Informationen für Screenreader-Nutzer und kontrastreiche Modi erhalten bleiben.

Für weiterführende Hintergrundtechniken über den konischen Fall hinaus finden Sie in unserer Anleitung zum Erstellen moderner CSS-Gradientenhintergründe Informationen zum Überlagern linearer und radialer Gradienten für Tiefe, was gut mit den Winkeleffekten hier harmoniert.

Conic Gradient CSS praktisch einsetzen#

Conic Gradient CSS ist genau dann die richtige Wahl, wenn etwas um einen Mittelpunkt kreist: ein Farbkreis für einen Color Picker, ein Tortendiagramm oder Donut-Chart ohne Bibliothek, ein Fortschrittsring, ein Sonnenstrahl-Effekt oder ein Schachbrettmuster. Der gedankliche Wechsel ist klein, aber entscheidend. Hören Sie auf, über Entfernungen nachzudenken, und denken Sie in Winkeln, die Syntax ergibt sich dann ganz natürlich.

Beginnen Sie mit einer geschlossenen Farbliste, um ein Gefühl dafür zu bekommen, und steigen Sie dann zu winkelbasierten Stopps für harte Kanten und repeating-conic-gradient für Muster auf. Wenn die Grad-Berechnung zu mühsam wird, überspringen Sie die Arithmetik: Öffnen Sie den visuellen CSS-Gradienten-Generator, bauen Sie den Effekt nach Augenmaß auf und kopieren Sie sauberes CSS in Ihr Stylesheet.

Häufig gestellte Fragen#

Was ist der Unterschied zwischen conic-gradient und radial-gradient in CSS? Ein radialer Gradient ändert die Farbe basierend auf der Entfernung vom Mittelpunkt und erzeugt konzentrische Ringe oder einen Scheinwerfereffekt. Ein konischer Gradient ändert die Farbe basierend auf dem Winkel um den Mittelpunkt und dreht sich im Uhrzeigersinn wie ein Uhrzeiger. Radial strahlt nach außen; konisch dreht sich.

Wie erstelle ich ein Kreisdiagramm mit conic-gradient CSS? Gib jedem Segment eine Farbe mit einem Start- und Endwinkel, der seinem Anteil an 360 Grad entspricht, und verwende übereinstimmende Winkel für harte Kanten. Zum Beispiel erstreckt sich ein 25%-Segment über 0deg 90deg. Füge border-radius: 50% hinzu, um das quadratische Element in einen Kreis zu schneiden. Ein visueller Generator erspart die Winkelberechnung.

Warum sieht mein konischer Gradient eckig statt rund aus? Ein konischer Gradient malt das gesamte Elementrechteck, das standardmäßig rechteckig ist. Die Drehung ist kreisförmig, aber der bemalte Bereich wird nicht automatisch auf einen Kreis beschnitten. Füge border-radius: 50% zum Element hinzu, damit die quadratischen Ecken abgeschnitten werden und du einen sauberen Kreis siehst.

Wie drehe ich den Startpunkt eines konischen Gradienten? Verwende das Schlüsselwort from mit einem Winkel, z.B. conic-gradient(from 90deg, ...). Winkel nehmen im Uhrzeigersinn zu, wobei 0deg nach oben, 90deg nach rechts, 180deg nach unten und 270deg nach links zeigt. Das Anpassen von from dreht die gesamte Drehung, ohne deine Farbstopps neu anzuordnen.

Wird conic-gradient in allen Browsern unterstützt? Ja, alle gängigen modernen Browser (Chrome, Edge, Firefox und Safari) unterstützen conic-gradient() seit etwa 2020, sodass moderne Nutzer keinen Fallback benötigen. Ausnahmen sind sehr alte Browser und viele E-Mail-Clients, wo die Gradientenunterstützung generell unzuverlässig ist. Verwende dort eine einfache Hintergrundfarbe als Fallback.

Wie erstelle ich ein sich wiederholendes Muster wie ein Schachbrett oder eine Sonnenexplosion? Verwende repeating-conic-gradient() mit winkelbasierten Stopps und setze dann background-size, um die Kachel zu steuern. Eine Sonnenexplosion wechselt zwei Farben in kleinen Gradsegmenten, und ein Schachbrett verwendet vier Quadrantenstopps, die auf eine kleine Kachelgröße verkleinert werden. Beide rendern unendlich skalierbar ohne Bilddateien.