# CSS conic-gradient: Farbkreise, Tortendiagramme und Glanz

[Canonical HTML page](https://gradiently.design/de/guide/css-conic-gradient)

conic-gradient() zieht Farbe um einen Punkt, wie der Zeiger einer Uhr. Aus dieser einen Idee entstehen Farbkreise, Torten- und Ringdiagramme, Metallglanz und Strahlenkränze.

## The short version

- Ein CSS conic gradient ordnet Farben um einen Mittelpunkt an und läuft vom oberen Rand im Uhrzeigersinn, statt entlang einer Linie oder in Ringen nach außen.
- Farbstopps in einem conic gradient nutzen Winkel oder Prozentwerte einer vollen Drehung, sodass 25 % und 90deg dieselbe Position meinen.
- Harte Stopps machen aus einem conic gradient Segmente, der schnellste Weg, in CSS ein Tortendiagramm zu zeichnen.
- Das Schlüsselwort from dreht, wo der Verlauf beginnt, und at verschiebt den Mittelpunkt.
- repeating-conic-gradient() wiederholt seine Stopps um den Kreis und zeichnet zusammen mit background-size Schachbretter und Strahlenkränze.

Ein **CSS conic gradient** zieht Farbe um einen Mittelpunkt, so wie ein Uhrzeiger über sein Zifferblatt streicht. Während ein linearer Farbverlauf sich entlang einer Linie und ein radialer sich von der Mitte nach außen ändert, ändert sich `conic-gradient()` mit dem Winkel. Er beginnt oben, läuft im Uhrzeigersinn und lässt sich überall einsetzen, wo CSS ein Bild annimmt. Damit ist er das natürliche Werkzeug für Farbkreise, Tortendiagramme, Laderinge und die winkligen Glanzlichter von gebürstetem Metall.

Ein einfacher Farbkreis: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Sieben Stopps, gleichmäßig über eine volle Drehung verteilt. Die Wiederholung der ersten Farbe am Ende schließt die Naht oben.

Wählst du für ein Design zwischen Verlaufsarten, statt die Syntax zu lernen, sind [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients) und der Designleitfaden zu [konischen Farbverläufen](https://gradiently.design/de/guide/conic-gradient) bessere Startpunkte.

## Die Syntax von conic-gradient()

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Alles vor dem ersten Komma ist optional. Beide Stopplisten in den letzten zwei Zeilen zeichnen dasselbe Viertelsegment.

| Teil | Beispiel | Standard |
| --- | --- | --- |
| Startwinkel | `from 45deg` | `from 0deg`, senkrecht nach oben |
| Mittelpunkt | `at 30% 50%`, `at top left` | `at center` |
| Interpolation | `in oklch`, `in hsl longer hue` | sRGB bei Hex-Farben |
| Stoppposition | `90deg`, `0.25turn`, `25%` | gleichmäßig um die Drehung verteilt |

Die Teile von conic-gradient(). Stoppositionen werden um den Kreis gemessen, nicht entlang einer Linie.

Winkel laufen im Uhrzeigersinn von oben: `90deg` ist drei Uhr, `180deg` ist sechs. Die vollständige Definition steht auf der [MDN-Seite zu conic-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). Die Browserunterstützung ist in aktuellen Versionen von Chrome, Edge, Safari und Firefox seit Jahren universell, Präfixe sind also nicht nötig.

## Den Verlauf drehen und verschieben

`from` dreht den ganzen Verlauf, was praktisch ist, wenn die Naht zwischen erster und letzter Farbe sonst oben säße. `at` verschiebt den Mittelpunkt. Rückst du ihn in eine Ecke, wird aus dem Kreis ein Strahlenfächer, und liegt er ganz außerhalb der Box, entsteht eine sanfte, schräge Fläche, die nichts mehr mit einem Kreis zu tun hat.

- from 0deg, zentriert: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: Naht unten: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: Fächer aus der Ecke: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

Dieselbe Familie aus Indigo, Violett und Pink, gedreht und verschoben. In der Eckversion füllt eine Vierteldrehung die Box.

## Torten- und Ringdiagramme in CSS

Gib jedem Segment einen Anfang und ein Ende und lass jedes dort beginnen, wo das letzte endete. `0` als zweite Stoppposition zu schreiben ist eine Abkürzung: Eine Position, die kleiner ist als die vorherige, wird auf diese begrenzt, sodass die neue Farbe genau dort beginnt, wo die letzte endete. Runde das Element mit `border-radius: 50%` ab und schneide mit einer radialen Maske ein Loch heraus, um die Torte zum Ring zu machen.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Eine Torte mit vier Segmenten und die eine Zeile, die sie zum Ring macht. Nutze benutzerdefinierte Eigenschaften für die Prozentwerte, wenn sich die Daten ändern.

Tortensegmente: 40, 25, 20 und 15 %: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

Der Hintergrund der Torte allein. Auf einem runden Element liest er sich als Diagramm.

> **Diagramme brauchen auch echten Text** Ein Farbverlauf ist ein Bild, seine Werte können Screenreader also nicht lesen. Setze die Zahlen als Text oder Tabelle neben das Diagramm oder gib dem Element `role="img"` und ein `aria-label`, das sie nennt.

Harte Kanten in conic gradients können entlang der Segmentlinien in manchen Browsern leicht gezackt aussehen. Stört dich das, lasse einen Bruchteil eines Grads zwischen den Stopps, etwa `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, damit die Kante einen Hauch Übergang bekommt.

## Farbkreise mit Farbton-Interpolation

Ein Farbkreis braucht meist sechs oder sieben Stopps. Mit Interpolationsmethoden kannst du den Browser bitten, den Farbtonkreis selbst zu durchlaufen. `longer hue` nimmt zwischen zwei Farbtönen den langen Weg, und sind beide Stopps dieselbe Farbe, ist der lange Weg der ganze Kreis, sodass zwei Rottöne ein volles Spektrum ergeben.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Eine Farbe, zweimal, und dazwischen ein voller Regenbogen. [OKLCH-Farbverläufe](https://gradiently.design/de/guide/css-gradient-oklch) erklären kürzeren und längeren Farbton.

## Metallglanz und Glanzlichter

Echtes gebürstetes Metall und polierte Scheiben fangen Licht in winkligen Bändern ein, genau das, was ein conic gradient zeichnet. Wechsle ein paar helle und dunkle Grautöne in ungleichem Abstand ab, und die Fläche wirkt wie Metall. Mit geringer Deckkraft über eine Farbe gelegt, verleiht derselbe Trick Buttons und Karten Glanz; ein durchgearbeitetes Beispiel siehe [Farbverlauf-Buttons](https://gradiently.design/de/guide/css-gradient-button).

- Gebürsteter Stahl: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Goldscheibe: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Ungleiche helle und dunkle Bänder um die Mitte wirken wie polierte Metalle.

## Wiederholende conic gradients für Muster

`repeating-conic-gradient()` wiederholt seine Stoppliste um die Drehung. Kurze, hartkantige Stopps ergeben Strahlenkränze. Zusammen mit `background-size` lässt sich ein zweifarbiges Viertelmuster zu einem Schachbrett kacheln, ein Muster, das sich sonst mit Farbverläufen mühsam zeichnen lässt. Mehr in [CSS-Muster](https://gradiently.design/de/guide/css-patterns).

- Sonnenstrahlen: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Nachtstrahlen: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Kurze harte Stopps, rundherum wiederholt.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

Ein Schachbrett mit 16 Pixeln: das klassische Transparenzraster hinter Bildeditoren.

## FAQ

### Was ist ein conic gradient in CSS?

Es ist ein Farbverlauf, dessen Farben sich mit dem Winkel um einen Mittelpunkt ändern, oben beginnend und im Uhrzeigersinn laufend, geschrieben mit `conic-gradient()`.

### Wie mache ich ein Tortendiagramm mit CSS?

Nutze harte Stopps in einem conic gradient, etwa `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, auf einem Element mit `border-radius: 50%`. Setze die Werte auch als Text für Screenreader.

### Wie drehe ich einen conic gradient?

Füge `from` und einen Winkel als erstes Argument hinzu, zum Beispiel `conic-gradient(from 90deg, ...)`. Der Verlauf beginnt dann bei drei Uhr statt oben.

### Warum sind die Kanten meines conic gradient gezackt?

Harte Stopps haben keinen Übergang, und manche Browser zeichnen die Grenze ohne Glättung. Ein Bruchteil eines Grads zwischen benachbarten Stopps mildert das.

### Funktionieren conic gradients in allen Browsern?

Ja, aktuelle Versionen von Chrome, Edge, Safari und Firefox unterstützen `conic-gradient()` und `repeating-conic-gradient()` ohne Präfixe.