Conic gradients: kleurenwielen, grafieken en glans

Een conic gradient verandert van kleur terwijl hij rond een middelpunt draait, zoals de wijzer van een klok over zijn wijzerplaat gaat. Een lineair kleurverloop verandert langs een lijn en een radiaal kleurverloop verandert naar buiten toe, maar een conic gradient verandert met de hoek. Kijk recht van boven op een kegel die in banden is geverfd en je ziet hetzelfde, en daar komt de naam vandaan. Figma en enkele andere tools noemen het een angular gradient.

Dat hoekgebaseerde gedrag maakt conic gradients goed in dingen die andere kleurverlopen niet kunnen: kleurenwielen, cirkeldiagrammen, geborsteld metaal, sterrenbursts en lichtstralen. Deze gids behandelt ze allemaal met levende voorbeelden. De volledige CSS-syntaxis staat in CSS conic-gradient().

Hoe een conic gradient werkt

Je stelt een middelpunt in, een starthoek en een lijst kleuren met hoeken of percentages. Nul graden wijst omhoog en de draai loopt met de klok mee. Waar de ene kleur eindigt en de volgende begint is een stop, precies als bij andere kleurverlopen, behalve dat 25% een kwartslag betekent, niet een kwart van de breedte.

Die herhaling van de eerste kleur aan het eind is belangrijk. Verschilt de laatste stop van de eerste, dan krijg je een harde lijn recht omhoog vanuit het midden waar de draai zijn eigen begin ontmoet. De gids over het kleurenwiel legt uit hoe je de tinten op zo’n wiel leest.

Voorbeelden van conic gradients voor design

Taart- en donutdiagrammen

Geef elke kleur een begin- en een eindhoek en het kleurverloop wordt een cirkeldiagram, zonder afbeelding en zonder grafiekbibliotheek. Voeg een rond masker toe en het wordt een donut. Dit past bij eenvoudige, decoratieve data op posts en dia’s. Voeg voor echte rapportage labels toe, want een diagram dat alleen op kleur leunt laat mensen die kleur anders zien in de steek.

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

Metaal en glans

Geborsteld staal, een vinylplaat en een satijnen knop weerkaatsen allemaal licht in wiggen rond hun midden. Afwisselend licht en donker grijs rond een conic gradient bootst dat na. Gebruik vier tot zes wisselingen; minder lijkt op een strandbal, meer op een diagram. Geef het grijs een lichte warme tint voor goud of messing en een lichtblauwe tint voor chroom.

Stralen en bursts

Zet het middelpunt boven of buiten het beeld en een smalle heldere wig wordt een spotlight of een lichtbundel door een raam. Een herhalende conic gradient met afwisselende wiggen wordt een zonnestraal, het retro-instrument van de uitverkoopposter. Houd bursts achter een grote, eenvoudige kop; ze zijn op zichzelf luid.

Iriserend effect

Echt iriseren verschuift van tint met de kijkhoek. Een zachte conic draai van pastels, met het middelpunt opzij, komt verrassend dichtbij. Het is de basis van de meeste holografische kleurverlopen.

Conic, radiaal of lineair

Twijfel je, vraag dan wat het licht in je beeld doet. Licht dat over een oppervlak valt is lineair. Licht dat uit een bron komt is radiaal. Licht dat weerkaatst van iets draaiends of gebogens is conic. Soorten kleurverlopen toont ze allemaal naast elkaar.

Conic gradients goed doen

1. 1

   Bepaal waar het middelpunt komt

   Een gecentreerde conic gradient lijkt op een diagram of wiel. Het middelpunt naar een hoek of buiten het beeld verplaatsen maakt er licht en glans van.

2. 2

   Sluit de cirkel

   Herhaal de eerste kleur aan het eind, tenzij je een zichtbare naad wilt. Harde naden zijn alleen voor diagrammen en bursts.

3. 3

   Verberg of verzacht het punt

   Elke conic gradient knijpt samen tot een scherp punt in het midden. Zet er een logo, een cirkel of de rand van het beeld overheen, of vervaag de laag.

4. 4

   Gebruik een starthoek

   De start roteren met from verplaatst waar de helderste wig valt, en dat is vaak alles wat een compositie nodig heeft.

5. 5

   Combineer met andere typen

   Een subtiele conic glans over een lineaire of radiale basis geeft een gevoel van materiaal zonder de aandacht naar zich toe te trekken.

Conic gradients maken ook patronen: een herhalende versie met vier harde kwarten tekent een dambord in één regel. CSS-patronen behandelt die.