CSS konisk gradient: cirklar, cirkeldiagram och glans

En konisk gradient i CSS sveper färg runt en mittpunkt, som en klockvisare sveper runt urtavlan. Där en linjär gradient ändras längs en linje och en radiell gradient ändras utåt från mitten ändras conic-gradient() med vinkeln. Den börjar överst, går medsols och kan användas överallt där CSS tar en bild. Det gör den till det naturliga verktyget för färgcirklar, cirkeldiagram, laddningsringar och de vinkelformade högdagrarna på borstad metall.

Om du väljer mellan gradienttyper för en design snarare än att lära dig syntaxen är typer av gradienter och designguiden om koniska gradienter bättre startpunkter.

Syntaxen för 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%)

Vinklar löper medsols från toppen: 90deg är klockan tre, 180deg är klockan sex. Hela definitionen finns på MDN:s sida om conic-gradient(). Webbläsarstödet har i åratal varit universellt i nuvarande Chrome, Edge, Safari och Firefox, så inga prefix behövs.

Att rotera och flytta svepet

from roterar hela gradienten, vilket är praktiskt när sömmen mellan den första och sista färgen annars skulle hamna överst. at flyttar mittpunkten. Flyttar du den till ett hörn blir cirkeln en solfjäder av strålar, och flyttar du den helt utanför rutan får du en mjuk, vinklad tvätt som inte alls liknar en cirkel.

Cirkeldiagram och ringdiagram i CSS

Ge varje sektor en start och ett slut, och låt varje börja där den förra slutade. Att skriva 0 som andra stoppositionen är en genväg: en position som är mindre än den föregående fastnar på den, så den nya färgen börjar exakt där den förra slutade. Runda av elementet med border-radius: 50% och skär ut ett hål med en radiell mask för att göra cirkeln till en ring.

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

Hårda kanter i koniska gradienter kan se lite hackiga ut längs sektorlinjerna i vissa webbläsare. Om det stör dig kan du lämna en bråkdels grad mellan stoppen, som #6366f1 0 39.8%, #22d3ee 40.2% 65%, så att kanten får ett hår av blandning.

Färgcirklar med nyansinterpolering

En färgcirkel behöver oftast sex eller sju stopp. Med interpoleringsmetoder kan du be webbläsaren själv färdas runt nyanscirkeln. longer hue tar den långa vägen runt mellan två nyanser, och när båda stoppen har samma färg är den långa vägen hela cirkeln, så två röda ger ett helt spektrum.

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

Metallglans och högdagrar

Riktig borstad metall och polerade skivor fångar ljus i vinkelformade band, vilket är precis vad en konisk gradient ritar. Växla några ljusa och mörka gråtoner, ojämnt fördelade, så läses ytan som metall. Lagd med låg opacitet över en färg ger samma trick glans åt knappar och kort. Se gradientknappar för ett genomarbetat exempel.

Upprepade koniska gradienter för mönster

repeating-conic-gradient() upprepar sin stopplista runt varvet. Korta stopp med hårda kanter ger strålkransar. Tillsammans med background-size bildar ett tvåfärgat kvartsmönster en schackruta, ett mönster som annars är krångligt att rita med gradienter. Mer i CSS-mönster.

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