Koniske gradienter: fargehjul, diagrammer og glans

En konisk gradient endrer farge når den sveiper rundt et sentrum, slik viseren på en klokke beveger seg rundt skiven. En lineær gradient endrer seg langs en linje og en radiell gradient endrer seg utover, men en konisk gradient endrer seg med vinkelen. Se rett ned på en kjegle malt i bånd, og du ville sett det samme, og det er derfor den heter det. Figma og noen andre verktøy kaller den en vinkelgradient (angular gradient).

Den vinkelbaserte oppførselen gjør koniske gradienter gode til det andre gradienter ikke kan: fargehjul, kakediagrammer, børstet metall, stjerneutbrudd og lysstråler. Denne guiden går gjennom hvert av dem med levende eksempler. Hele CSS-syntaksen finner du i CSS conic-gradient().

Slik fungerer en konisk gradient

Du setter et sentrum, en startvinkel og en liste med farger med vinkler eller prosenter. Null grader peker opp, og sveipet går med klokka. Der én farge slutter og neste begynner, er et stopp, akkurat som i andre gradienter, bortsett fra at 25 % betyr en kvart omdreining, ikke en fjerdedel av bredden.

Den gjentakelsen av første farge på slutten er viktig. Hvis siste stopp er ulikt det første, får du en hard linje rett opp fra sentrum der sveipet møter sin egen begynnelse. Guiden om fargehjulet forklarer hvordan du leser fargetonene på et hjul som dette.

Eksempler på koniske gradienter i design

Kake- og smultringdiagrammer

Gi hver farge en start- og sluttvinkel, så blir gradienten et kakediagram uten bilde og uten diagrambibliotek. Legg til en sirkulær maske, så blir det en smultring. Dette passer til enkle, dekorative data på innlegg og lysbilder. Til ekte rapportering, legg til etiketter, for et diagram som bare bygger på farge, svikter folk som ser farge annerledes.

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

Metall og glans

Børstet stål, en vinylplate og en satengknapp reflekterer alle lys i kiler rundt sentrum. Vekslende lyse og mørke grå toner rundt en konisk gradient imiterer det. Bruk fire til seks vekslinger. Færre ser ut som en badeball, flere ser ut som et diagram. Gi gråtonene et lett varmt skjær for gull eller messing og et lett blått for krom.

Stråler og utbrudd

Legg sentrum over eller utenfor bildet, så blir en smal, lys kile en spotlightstråle eller en lyssøyle gjennom et vindu. En repeterende konisk gradient med vekslende kiler blir en solstråleskive, det retro salgsplakat-virkemiddelet. Hold utbrudd bak en stor, enkel overskrift, for de er høylytte alene.

Irisering

Ekte irisering skifter fargetone med synsvinkelen. Et mykt, konisk sveip av pasteller, med sentrum til den ene siden, kommer overraskende nær. Det er grunnlaget for de fleste holografiske gradienter.

Konisk, radiell eller lineær

Hvis du er usikker, spør hva lyset i bildet ditt gjør. Lys som faller over en flate er lineært. Lys som kommer fra en kilde er radielt. Lys som reflekteres fra noe som dreier seg eller er buet, er konisk. Typer gradienter viser dem alle side om side.

Slik får du koniske gradienter riktige

1. 1

   Bestem hvor sentrum skal ligge

   En sentrert konisk gradient ser ut som et diagram eller et hjul. Å flytte sentrum til et hjørne eller utenfor bildet gjør den til lys og glans.

2. 2

   Lukk sirkelen

   Gjenta den første fargen på slutten med mindre du vil ha en synlig søm. Harde sømmer er bare for diagrammer og utbrudd.

3. 3

   Skjul eller mykne punktet

   Hver konisk gradient snører seg sammen til et skarpt punkt i sentrum. Legg en logo, en sirkel eller kanten av bildet over det, eller gjør laget uskarpt.

4. 4

   Bruk en startvinkel

   Å rotere starten med from flytter hvor den lyseste kilen faller, og det er ofte alt en komposisjon trenger.

5. 5

   Kombiner med andre typer

   En subtil konisk glans over en lineær eller radiell base gir en følelse av materiale uten å dra oppmerksomhet til seg selv.

Koniske gradienter lager også mønstre: en repeterende versjon med fire harde kvarter tegner et sjakkbrett på én linje. CSS-mønstre tar for seg dem.