Koniska gradienter: färgcirklar, diagram och glans

En konisk gradient ändrar färg när den sveper runt en mittpunkt, ungefär som visaren på en klocka rör sig runt urtavlan. En linjär gradient ändras längs en linje och en radiell gradient ändras när den rör sig utåt, men en konisk gradient ändras med vinkeln. Titta rakt ned på en kon målad i band och du skulle se samma sak, vilket är varifrån namnet kommer. Figma och en del andra verktyg kallar den en vinkelgradient.

Det vinkelbaserade beteendet gör koniska gradienter bra på sådant som andra gradienter inte klarar: färgcirklar, cirkeldiagram, borstad metall, strålkransar och ljusstrålar. Den här guiden går igenom var och en med levande exempel. Hela CSS-syntaxen finns i CSS conic-gradient().

Så fungerar en konisk gradient

Du anger en mittpunkt, en startvinkel och en lista med färger med vinklar eller procent. Noll grader pekar uppåt och svepet går medsols. Där en färg slutar och nästa börjar finns ett stopp, precis som i andra gradienter, förutom att 25 % betyder ett kvarts varv, inte en fjärdedel av bredden.

Att den första färgen upprepas i slutet spelar roll. Om det sista stoppet skiljer sig från det första får du en hård linje rakt upp från mitten där svepet möter sin egen början. Guiden om färgcirkeln förklarar hur du läser nyanserna på en cirkel som den här.

Exempel på koniska gradienter för design

Cirkel- och ringdiagram

Ge varje färg en start- och slutvinkel så blir gradienten ett cirkeldiagram utan bild och utan diagrambibliotek. Lägg till en rund mask så blir det ett ringdiagram. Det passar enkel, dekorativ data i inlägg och presentationer. För riktig rapportering bör du lägga till etiketter, eftersom ett diagram som bara förlitar sig på färg sviker den som ser färg annorlunda.

.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 och glans

Borstat stål, en vinylskiva och en satinknapp reflekterar alla ljus i kilar runt sin mitt. Växlande ljusa och mörka gråtoner runt en konisk gradient imiterar det. Använd fyra till sex växlingar. Färre ser ut som en badboll, fler ser ut som ett diagram. Ge gråtonerna en svag varm ton för guld eller mässing och en svag blå ton för krom.

Strålar och strålkransar

Placera mittpunkten ovanför eller utanför bilden så blir en smal, ljus kil en strålkastarstråle eller en ljusstråle genom ett fönster. En upprepande konisk gradient med växlande kilar blir en solstråleeffekt, retrogreppet från reaplakat. Håll strålkransar bakom en stor, enkel rubrik. De är högljudda nog som de är.

Skimmer

Äkta skimmer ändrar nyans med betraktningsvinkeln. Ett mjukt koniskt svep av pasteller, med mittpunkten förskjuten åt ena sidan, kommer förvånansvärt nära. Det är basen i de flesta holografiska gradienter.

Konisk, radiell eller linjär

Om du är osäker kan du fråga vad ljuset i din bild gör. Ljus som faller över en yta är linjärt. Ljus som kommer från en källa är radiellt. Ljus som reflekteras från något som snurrar eller är välvt är koniskt. Typer av gradienter visar alla bredvid varandra.

Så får du till koniska gradienter

1. 1

   Bestäm var mittpunkten ska ligga

   En centrerad konisk gradient ser ut som ett diagram eller en färgcirkel. Flyttar du mittpunkten till ett hörn eller utanför bilden blir den ljus och glans.

2. 2

   Sluta cirkeln

   Upprepa den första färgen i slutet om du inte vill ha en synlig söm. Hårda sömmar är bara till för diagram och strålkransar.

3. 3

   Dölj eller mjuka upp punkten

   Varje konisk gradient dras ihop till en skarp punkt i mitten. Lägg en logotyp, en cirkel eller bildens kant över den, eller sudda lagret.

4. 4

   Använd en startvinkel

   Om du roterar starten med from flyttas den ljusaste kilen, vilket ofta är allt en komposition behöver.

5. 5

   Kombinera med andra typer

   En subtil konisk glans över en linjär eller radiell botten ger en känsla av material utan att dra uppmärksamhet till sig.

Koniska gradienter kan också göra mönster: en upprepande version med fyra hårda kvartar ritar ett schackbräde på en rad. CSS-mönster tar upp dem.