# Konische Farbverläufe: Farbkreise, Diagramme und Glanz

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

Lineare Verläufe wandern, radiale breiten sich aus, und konische drehen sich. Dieser eine Unterschied macht sie zum richtigen Werkzeug für Farbkreise, Diagramme, Metall und Lichtstrahlen.

## The short version

- Ein konischer Farbverlauf ändert die Farbe, während er um einen Mittelpunkt rotiert, seine Stopps sind also Winkel statt Abstände.
- Konische Farbverläufe sind der natürliche Weg, Farbkreise, Torten- und Ringdiagramme, metallischen Glanz und Lichtstrahlen zu zeichnen.
- Design-Tools nennen dasselbe oft einen Winkelverlauf.
- Jeder konische Farbverlauf hat eine scharfe Spitze in der Mitte und eine Naht, wo sich der Kreis schließt, beides muss man handhaben.
- Ein konischer Verlauf mit harten Stopps wird zum Diagramm, mit weichen Stopps zu einer Fläche, die Licht einzufangen scheint.

Ein **konischer Farbverlauf** (englisch *conic gradient*) ändert die Farbe, während er um einen Mittelpunkt streicht, so wie der Zeiger einer Uhr über das Zifferblatt wandert. Ein linearer Farbverlauf ändert sich entlang einer Linie und ein radialer, während er sich nach außen bewegt, ein konischer aber ändert sich mit dem Winkel. Blickst du von oben auf einen in Streifen bemalten Kegel, sähest du dasselbe, daher der Name. Figma und einige andere Tools nennen ihn **Winkelverlauf**.

Dieses winkelbasierte Verhalten macht konische Verläufe gut für Dinge, die andere nicht können: Farbkreise, Tortendiagramme, gebürstetes Metall, Strahlenkränze und Lichtstrahlen. Dieser Leitfaden zeigt jedes mit Live-Beispielen. Die vollständige CSS-Syntax steht unter [CSS conic-gradient()](https://gradiently.design/de/guide/css-conic-gradient).

## So funktioniert ein konischer Farbverlauf

Du legst einen Mittelpunkt, einen Startwinkel und eine Liste von Farben mit Winkeln oder Prozentwerten fest. Null Grad zeigt nach oben, und der Verlauf läuft im Uhrzeigersinn. Wo eine Farbe endet und die nächste beginnt, ist ein Stopp, genau wie bei anderen Verläufen, nur dass 25 % eine Vierteldrehung bedeutet, nicht ein Viertel der Breite.

Farbkreis: `conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)`

Ein voller Farbtonkreis. Die letzte Farbe wiederholt die erste, damit sich der Kreis ohne Naht schließt.

Diese Wiederholung der ersten Farbe am Ende ist wichtig. Weicht der letzte Stopp vom ersten ab, entsteht eine harte Linie senkrecht nach oben von der Mitte, wo der Verlauf auf seinen eigenen Anfang trifft. Wie du die Farbtöne auf einem solchen Kreis liest, erklärt der Leitfaden zum [Farbkreis](https://gradiently.design/de/guide/color-wheel).

## Beispiele für konische Farbverläufe im Design

- Harte Stopps: Diagrammsegmente: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Gebürsteter Metallglanz: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Lichtstrahl: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Strahlenkranz: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Schillerndes Pastell: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Eckschwenk: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Sechs konische Farbverläufe. Harte Stopps ergeben Diagramme und Strahlenkränze, weiche Stopps Flächen und Licht.

### Torten- und Ringdiagramme

Gib jeder Farbe einen Start- und Endwinkel, und der Verlauf wird zum Tortendiagramm, ohne Bild und ohne Diagrammbibliothek. Mit einer kreisförmigen Maske wird daraus ein Ringdiagramm. Das passt zu einfachen, dekorativen Daten auf Posts und Folien. Für echte Berichte füge Beschriftungen hinzu, denn ein Diagramm, das allein auf Farbe setzt, versagt bei Menschen, die Farben anders sehen.

```css
.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
```

Ein Ringdiagramm in einem Element. Ändere die Prozentwerte, um die Segmente zu ändern.

### Metall und Glanz

Gebürsteter Stahl, eine Schallplatte und ein Satinknopf reflektieren Licht in Keilen um ihre Mitte. Abwechselnd helle und dunkle Grautöne in einem konischen Verlauf ahmen das nach. Nimm vier bis sechs Wechsel; weniger sieht aus wie ein Wasserball, mehr wie ein Diagramm. Tönt die Grautöne leicht warm für Gold oder Messing und leicht bläulich für Chrom.

### Strahlen und Kränze

Setzt du den Mittelpunkt über oder außerhalb des Bildes, wird ein schmaler heller Keil zum Scheinwerferstrahl oder zum Lichtschacht durch ein Fenster. Ein sich wiederholender konischer Verlauf mit abwechselnden Keilen wird zum Strahlenkranz, dem Retro-Stilmittel von Rabattplakaten. Halte Strahlenkränze hinter einer großen, einfachen Überschrift; allein sind sie laut.

### Schillern

Echtes Schillern ändert den Farbton mit dem Blickwinkel. Ein sanfter konischer Schwung aus Pastelltönen, mit der Mitte seitlich versetzt, kommt dem überraschend nah. Er ist die Grundlage der meisten [holografischen Farbverläufe](https://gradiently.design/de/guide/holographic-gradients).

## Konisch, radial oder linear

| Art | Farbe ändert sich mit | Am besten für |
| --- | --- | --- |
| Linear | Abstand entlang einer Linie | Himmel, Licht von einer Seite, einfache Markenflächen |
| Radial | Abstand von einem Mittelpunkt | Scheinwerfer, Leuchten, Vignetten |
| Konisch | Winkel um einen Mittelpunkt | Kreise, Diagramme, Glanz, Strahlen, Kränze |

Jede Art beantwortet eine andere Frage dazu, wo sich Farbe ändert.

Bist du unsicher, frag dich, was das Licht in deinem Bild tut. Licht, das über eine Fläche fällt, ist linear. Licht, das von einer Quelle kommt, ist [radial](https://gradiently.design/de/guide/radial-gradient). Licht, das von etwas Drehendem oder Gekrümmtem reflektiert wird, ist konisch. [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients) zeigt alle nebeneinander.

## Konische Farbverläufe richtig einsetzen

1. **Entscheide, wo die Mitte liegt** Ein zentrierter konischer Verlauf sieht aus wie ein Diagramm oder ein Farbkreis. Rückst du die Mitte in eine Ecke oder aus dem Bild, wird daraus Licht und Glanz.
2. **Schließe den Kreis** Wiederhole die erste Farbe am Ende, es sei denn, du willst eine sichtbare Naht. Harte Nähte sind nur für Diagramme und Strahlenkränze.
3. **Verstecke oder mildere die Spitze** Jeder konische Verlauf läuft in der Mitte in eine scharfe Spitze zusammen. Lege ein Logo, einen Kreis oder den Bildrand darüber oder weichzeichne die Ebene.
4. **Nutze einen Startwinkel** Das Drehen des Starts mit `from` verschiebt, wo der hellste Keil landet, und das ist für eine Komposition oft alles, was nötig ist.
5. **Kombiniere mit anderen Arten** Ein dezenter konischer Glanz über einer linearen oder radialen Basis vermittelt ein Materialgefühl, ohne sich in den Vordergrund zu drängen.

### Vermeiden

- Ein Regenbogen-Farbkreis als Hintergrund hinter Text
- Eine scharfe Mittelspitze in voller Sicht
- Eine Naht, wo die letzte Farbe nicht zur ersten passt
- Diagramme, in denen Farbe der einzige Weg ist, Segmente zu unterscheiden

### Besser

- Kurze, verwandte Farbbögen für Flächen
- Die Mitte hinter einem Objekt oder außerhalb der Fläche versteckt
- Die erste Farbe am Ende wiederholt
- Beschriftungen oder Muster neben Diagrammfarben

Konische Verläufe erzeugen auch Muster: Eine sich wiederholende Version mit vier harten Vierteln zeichnet ein Schachbrett in einer Zeile. [CSS-Muster](https://gradiently.design/de/guide/css-patterns) behandelt sie.

## FAQ

### Was ist ein konischer Farbverlauf?

Ein konischer Farbverlauf ändert die Farbe, während er um einen Mittelpunkt rotiert, seine Farbstopps werden also durch Winkel statt durch Abstände festgelegt.

### Ist ein konischer Farbverlauf dasselbe wie ein Winkelverlauf?

Ja. Figma und mehrere andere Design-Tools nennen ihn Winkelverlauf; CSS nennt ihn conic gradient.

### Wie mache ich ein Tortendiagramm mit einem konischen Farbverlauf?

Gib jeder Farbe mit harten Stopps eine Start- und Endposition, zum Beispiel Violett von 0 % bis 45 % und Pink von 45 % bis 75 %. Füge Beschriftungen hinzu, damit das Diagramm nicht allein von Farbe abhängt.

### Warum ist oben in meinem konischen Farbverlauf eine Linie?

Der Verlauf beginnt und endet im selben Winkel. Weicht die letzte Farbe von der ersten ab, entsteht dort eine Naht; wiederhole die erste Farbe am Ende, um sie zu entfernen.