CSS conic gradient: wielen, cirkeldiagrammen en glans

Een CSS conic gradient laat kleur rond een middelpunt draaien, zoals een klokwijzer over zijn wijzerplaat gaat. Waar een lineair kleurverloop langs een lijn verandert en een radiaal kleurverloop naar buiten vanuit het midden, verandert conic-gradient() met de hoek. Hij begint bovenaan, loopt met de klok mee en wordt gebruikt overal waar CSS een afbeelding accepteert. Dat maakt hem het natuurlijke gereedschap voor kleurenwielen, cirkeldiagrammen, laadringen en de hoekige highlights van geborsteld metaal.

Kies je tussen soorten kleurverlopen voor een ontwerp in plaats van de syntaxis te leren, dan zijn soorten kleurverlopen en de ontwerpgids over conic gradients betere beginpunten.

De syntaxis van 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%)

Hoeken lopen met de klok mee vanaf de bovenkant: 90deg is drie uur, 180deg is zes. De volledige definitie staat op de conic-gradient()-pagina van MDN. Browserondersteuning is al jaren universeel in de huidige Chrome, Edge, Safari en Firefox, dus voorvoegsels zijn niet nodig.

De draai roteren en verplaatsen

from roteert het hele kleurverloop, handig als de naad tussen de eerste en laatste kleur anders bovenaan zou zitten. at verplaatst het middelpunt. Naar een hoek verplaatst wordt het wiel een waaier van stralen, en helemaal buiten het vak verplaatst geeft het een zachte schuine wassing die niets meer op een wiel lijkt.

Cirkel- en donutdiagrammen in CSS

Geef elk segment een begin en een eind en laat elk beginnen waar het vorige eindigde. 0 schrijven als tweede stoppositie is een sluiproute: een positie kleiner dan de vorige wordt eraan vastgezet, dus de nieuwe kleur begint precies waar de vorige eindigde. Rond het element af met border-radius: 50% en knip een gat met een radiaal masker om van de taart een donut te maken.

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

Harde randen in conic gradients kunnen in sommige browsers iets gekarteld lijken langs de segmentlijnen. Stoort het je, laat dan een fractie van een graad tussen stops, zoals #6366f1 0 39.8%, #22d3ee 40.2% 65%, zodat de rand een haartje menging krijgt.

Kleurenwielen met tintinterpolatie

Een kleurenwiel heeft meestal zes of zeven stops nodig. Met interpolatiemethoden kun je de browser zelf de tintencirkel laten afleggen. longer hue neemt de lange weg tussen twee tinten, en als beide stops dezelfde kleur zijn is de lange weg de hele cirkel, dus twee keer rood geeft een volledig spectrum.

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

Metaalglans en highlights

Echt geborsteld metaal en gepolijste schijven vangen licht in hoekige banden, precies wat een conic gradient tekent. Wissel enkele lichte en donkere grijstinten af, met ongelijke tussenruimten, en het oppervlak leest als metaal. Met lage dekking over een kleur gelegd geeft hetzelfde trucje glans aan knoppen en kaarten; zie kleurverloopknoppen voor een uitgewerkt voorbeeld.

Herhalende conic gradients voor patronen

repeating-conic-gradient() herhaalt zijn stoplijst rond de draai. Korte stops met harde randen geven sterrenbursts. Gecombineerd met background-size tegelt een tweekleurig kwartpatroon tot een dambord, een patroon dat anders lastig met kleurverlopen te tekenen is. Meer in CSS-patronen.

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