CSS conic gradient: hjul, kakediagrammer og glans

En konisk gradient i CSS sveiper farge rundt et sentrum, slik en klokkeviser sveiper rundt skiven. Der en lineær gradient endrer seg langs en linje og en radiell gradient endrer seg utover fra sentrum, endrer conic-gradient() seg med vinkelen. Den starter øverst, går med klokka og kan brukes overalt CSS tar et bilde. Det gjør den til det naturlige verktøyet for fargehjul, kakediagrammer, lasteringer og de vinkelrette høylysene i børstet metall.

Velger du mellom gradienttyper til et design i stedet for å lære syntaksen, er typer gradienter og designguiden om koniske gradienter bedre utgangspunkt.

Syntaksen til 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%)

Vinkler går med klokka fra toppen: 90deg er klokka tre, 180deg er klokka seks. Hele definisjonen står på MDNs side om conic-gradient(). Nettleserstøtten har vært universell i gjeldende Chrome, Edge, Safari og Firefox i årevis, så prefikser trengs ikke.

Å rotere og flytte sveipet

from roterer hele gradienten, noe som er nyttig når sømmen mellom første og siste farge ellers ville havnet øverst. at flytter sentrum. Flytter du det til et hjørne, blir hjulet til en vifte av stråler, og flytter du det helt utenfor boksen, får du en mild vinklet strøk som ikke ligner et hjul i det hele tatt.

Kake- og smultringdiagrammer i CSS

Gi hvert stykke en start og en slutt, og la hvert begynne der det forrige sluttet. Å skrive 0 som andre stoppposisjon er en snarvei: en posisjon som er mindre enn den forrige, klemmes til den, så den nye fargen starter nøyaktig der den siste endte. Runde av elementet med border-radius: 50%, og klipp et hull med en radiell maske for å gjøre kaken til en smultring.

.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 kanter i koniske gradienter kan se litt hakkete ut langs stykkelinjene i noen nettlesere. Hvis det plager deg, la det være en brøkdel av en grad mellom stoppene, for eksempel #6366f1 0 39.8%, #22d3ee 40.2% 65%, så kanten får et hårstrå av blanding.

Fargehjul med fargetoneinterpolasjon

Et fargehjul trenger vanligvis seks eller sju stopp. Med interpolasjonsmetoder kan du be nettleseren om å gå fargetonesirkelen selv. longer hue tar den lange veien rundt mellom to fargetoner, og når begge stoppene har samme farge, er den lange veien hele sirkelen, så to røde gir et fullt spektrum.

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

Metallglans og høylys

Ekte børstet metall og polerte skiver fanger lys i vinkelbånd, og det er nøyaktig det en konisk gradient tegner. Veksle noen lyse og mørke gråtoner med ujevn avstand, så leses flaten som metall. Lagt lag på lag med lav dekning over en farge gir det samme trikset glans til knapper og kort. Se gradientknapper for et gjennomarbeidet eksempel.

Repeterende koniske gradienter til mønstre

repeating-conic-gradient() gjentar stopplisten rundt omdreiningen. Korte stopp med harde kanter gir stjerneutbrudd. Sammen med background-size legges et kvartmønster i to farger som fliser til et sjakkbrett, et mønster som ellers er tungvint å tegne med gradienter. Mer i CSS-mønstre.

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