CSS conic-gradient: Farbkreise, Tortendiagramme und Glanz

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.

Wählst du für ein Design zwischen Verlaufsarten, statt die Syntax zu lernen, sind Arten von Farbverläufen und der Designleitfaden zu konischen Farbverläufen bessere Startpunkte.

Die Syntax von conic-gradient()

/*               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%)

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(). 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.

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.

.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%);
}

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.

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

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.

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.

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