Liukuvärit

1. Suorat liukuvärit

Suorat liukuvärit saadaan aikaan linear-gradient() -funktiolla.

Tämä luo liukuvärin, joka menee punaisesta siniseen:

background: 
  linear-gradient(
    red, 
    blue
  )
;

Miten koodi kannattaa sisentää?

Sisennyksillä, välilyönneillä ja rivinvaihdoilla ei ole merkitystä koodin toimivuuden kannalta, mutta ne auttavat silmää hahmottamaan, mikä osa koodia kuuluu mihinkin, ja helpottavat virheiden etsimistä sekä koodin ymmärtämistä.

Voit sisentää joko välilyönneillä tai Tab -näppäimellä (näppäin Q kirjaimen vasemmalla puolella).

Rivinvaihdon voi tehdä Enter -näppäimellä.

Esimerkki 1

background: linear-gradient(red, blue);

...on parempi kirjoittaa näin:

background: 
  linear-gradient(
    red, 
    blue
  )
;

Esimerkki 2

Tämä on tärkeää etenkin silloin kun koodinpätkä on pitkä:

background:linear-gradient(black 0% 12.5%, saddlebrown 12.5% 25%, red 25% 37.5%, orange 37.5% 50%, yellow 50% 62.5%, green 62.5% 75%, blue 75% 87.5%, indigo 87.5% 100%);

Vaikka koodinpätkä toimii teknisesti oikein, sitä on huomattavasti vaikeampi lukea ja ymmärtää verrattuna selkeästi sisennettyyn versioon:

background:
  linear-gradient(
    black 0% 12.5%, 
    saddlebrown 12.5% 25%, 
    red 25% 37.5%, 
    orange 37.5% 50%, 
    yellow 50% 62.5%, 
    green 62.5% 75%, 
    blue 75% 87.5%, 
    indigo 87.5% 100%
  )
;

Tätä voi selkiyttää lisää laittamalla välilyöntejä niin että koodin eri osat alkavat samasta kohtaa:

background:
  linear-gradient(
    black       0%     12.5% , 
    saddlebrown 12.5%  25%   , 
    red         25%    37.5% , 
    orange      37.5%  50%   , 
    yellow      50%    62.5% , 
    green       62.5%  75%   , 
    blue        75%    87.5% , 
    indigo      87.5%  100%
  )
;

Tai jopa näin:

background:
  linear-gradient(
    rgb( 0   0   0   )  0.0%  12.5%, 
    rgb( 139 69  19  ) 12.5%  25.0%, 
    rgb( 255 0   0   ) 25.0%  37.5%, 
    rgb( 255 165 0   ) 37.5%  50.0%, 
    rgb( 255 255 0   ) 50.0%  62.5%, 
    rgb( 0   128 0   ) 62.5%  75.0%, 
    rgb( 255 0   0   ) 75.0%  87.5%, 
    rgb( 75  0   130 ) 87.5%  100%
  )
;

Voit lisätä CSS koodin sisään kommentteja näppäilemällä /* */.

Näiden merkkien väliin voi kirjoittaa mitä vain ilman että se vaikuttaa koodin toimivuuteen:

background:
  linear-gradient(
    /*   R   G   B     from   to  */
    rgb( 0   0   0   ) 0.0%  12.5%,
    rgb( 139 69  19  ) 12.5%  25.0%,
    rgb( 255 0   0   ) 25.0%  37.5%, 
    rgb( 255 165 0   ) 37.5%  50.0%, 
    rgb( 255 255 0   ) 50.0%  62.5%, 
    rgb( 0   128 0   ) 62.5%  75.0%, 
    rgb( 255 0   0   ) 75.0%  87.5%, 
    rgb( 75  0   130 ) 87.5%  100%
  )
;

Tee niinkuin itselle on helpointa ja nopeinta. Vältä kuitenkin sekasotkua vaikka se toimisikin!

background: linear-gradient(black 0% 12.5% 
,   saddlebrown 12.5%  25% ,
red    25%   37.5% ,
orange 37.5% 50% ,
yellow 50% 62.5% , /* äöäöäöää */
green 62.5% 75% ,
blue  75% 87.5% 
,indigo 87.5% 100%
  );

Voit vaihtaa liukuvärin suuntaa:

background:
  linear-gradient(
    to right,
    red, 
    blue
  )
;

Suunta määritellään ensimmäisellä rivillä. Ensin tulee avainsana to ja sitten vaihtoehtoisesti bottom / top / left / right.

background:
  linear-gradient(
    to top,
    red, 
    blue
  )
;

Tai kulmasta kulmaan:

background:
  linear-gradient(
    to bottom right,
    red, 
    blue
  )
;

background:
  linear-gradient(
    to top left,
    red, 
    blue
  )
;

Voit käyttää myös astelukuja:

background:
  linear-gradient(
    75deg,
    red, 
    blue
  )
;

Voit määrittää monta väriä:

background:
  linear-gradient(
    90deg,
    red, 
    blue,
    lime,
    yellow
  )
;

Miksi liukuväri ei toimi / tule näkyviin?

Mikäli liukuvärisi ei tule näkyviin, koodissasi on virhe. On hyvin tärkeää että kaikki on kirjoitettu pilkuntarkasti oikein koodin rakenteen mukaan. Yleisimpiä virheitä on puuttuva pilkku, sulku tai muu välimerkki, tai sitten väärin kirjoitettu värin määritelmä.

Jokaisen sulkujen sisällä olevan rivin välissä tulee olla pilkku

❌: puuttuva pilkku

background:
    linear-gradient(
      90deg,
      red, 
      blue
      lime,
      yellow
    )
  ;

Korjaus: blue, ← lisää pilkku

Viimeisellä rivillä ei saa olla pilkkua

❌: viimeisellä rivillä on pilkku

background:
    linear-gradient(
      90deg,
      red, 
      blue,
      lime,
      yellow,
    )
  ;

Korjaus: yellow ← poista pilkku viimeiseltä riviltä

Asteluvun jälkeen pitää olla "deg" ilman välilyöntiä numeron ja "deg":in välissä

❌: asteluvusta puuttuu "deg"

background:
    linear-gradient(
      90,
      red, 
      blue,
      lime,
      yellow
    )
  ;

Korjaus: 90deg ← lisää "deg"

Väri on määritelty väärin

❌: blue on kirjoitettu väärin

background:
    linear-gradient(
      90deg,
      red, 
      bleu,
      lime,
      yellow
    )
  ;

Korjaus: bleu ← pitäisi olla blue

Puuttuva sulku

❌: linear-gradient() -funktio on jäänyt "auki"

background:
    linear-gradient(
      90deg,
      red, 
      bleu,
      lime,
      yellow
  ;

Korjaus: puuttuva sulku linear-gradient( ← lisää ) loppuun ennen ; merkkiä

Värien sijainnit voi määrittää prosenteilla:

background:
    linear-gradient(
      90deg,
      red 0%, 
      blue 20%,
      lime 60%
    )
  ;

Tai kahdella prosenttiluvulla, joista ensimmäinen on alkupiste ja toinen loppupiste:

background:
  linear-gradient(
    90deg,
    red 0%, 
    blue 20% 80%,
    lime 100%
  )
;

Värien sijainnin voi määrittää myös vaikka pikselimitoilla:

background:
  linear-gradient(
    90deg,
    red 50px, 
    blue 100px 150px,
    lime 200px
  )
;

Jos värin alkupiste on sama tai pienempi kuin edellisen värin loppupiste, näiden värien välille tulee selkeä raja:

background:
  linear-gradient(
    black       0  12.5%, 
    saddlebrown 0  25%, 
    red         0  37.5%, 
    orange      0  50%, 
    yellow      0  62.5%, 
    green       0  75%, 
    blue        0  87.5%, 
    indigo      0  100%
  )
;

Muutamia esimerkkejä

background:
  linear-gradient(
    to bottom right,
    red 50%,
    black 50%
  )
;

Tarkemman värimäärityksen voi saada aikaan esimerkiksi lch() -funktiolla:

Miten värejä kannattaa määritellä?

Jos sekoitat keskenään sinistä ja keltaista, minkä värin saat aikaiseksi?

Vastaus on sRGB-väriavaruudessa epäintuitiivisesti harmaa.

background-color: 
  color-mix(
    in srgb, 
    blue, 
    yellow
  )
;

Miksi? Tämä selittyy sillä miten värit muodostuvat ruudulla.

Näyttöjen ruudut koostuvat miljoonista pikseleistä. Jokainen pikseli on todellisuudessa kolme mikroskooppisen pientä eri väristä valoa vierekkäin: punainen, vihreä ja sininen.

RGB pixels.jpg — Lähikuva ruudusta. Kuva: Stan Zurek CC BY-SA 3.0, Link

Punaisen, vihreän ja sinisen päävärien sekoituksilla voi aikaansaada melkein minkä tahansa muun värin. Tätä värien skaalaa ja tapaa näyttää värejä kutsutaan sRGB-väriavaruudeksi.

Esimerkiksi: Jos punaiset ja vihreät valot ovat samaan aikaan täysillä, mutta sininen on pois päältä, saamme keltaisen värin.

background: rgb(255 255 0);

rgb(255 255 0) on tapa kuvata keltaista väriä numeerisesti käyttäen punaisen (R), vihreän (G) ja sinisen (B) valon yhdistelmän arvoja. Jokainen väri voi saada arvon väliltä 0 – 255, mikä määrittää kuinka paljon kyseistä väriä sekoitetaan.

Jos R = 0, G = 0 ja B = 0, eli jos valot ovat sammuksissa, saamme mustaa:

background: rgb(0 0 0);

Päinvastoin, jos kaikki valot ovat täysillä, eli jos R = 255, G = 255 ja B = 255, saamme valkoista:

background: rgb(255 255 255);

Miksi keltaisen ja sinisen sekoituksesta tulee sitten harmaa?

background: 
  linear-gradient(
    90deg,
    blue,
    yellow
  )
;

Sinisen RGB arvo on rgb(0 0 255) ja keltaisen rgb(255 255 0) — näiden kahden värin keskiarvo on rgb(127 127 127), joka onkin keskiharmaa...!

background: rgb(127 127 127);

Jos kuitenkin haluaa siirtymän sinisestä keltaiseen joka ei muutu keskeltä harmaaksi, paras vaihtoehto lienee lisätä itse ne värit joita haluaa siirtymässä näkyä:

background: 
  linear-gradient(
    90deg, 
    blue, 
    dodgerblue, 
    darkturquoise, 
    springgreen, 
    yellow
  )
;

Värien valitseminen RGB arvoilla tai kryptisillä nimillä on kuitenkin aika epä-intuitiivista.

Sen takia värien määrittelyyn on olemassa muutamia eri vaihtoehtoja:

HSL

HSL tulee sanoista hue, saturation ja lightness, eli sävy, kylläisyys ja valoisuus.

hue määritellään asteikolla 0-360, missä esim. 100 on vihreä ja 200 sininen.
saturation määritellään asteikolla 0-100% värittömästä kylläiseen.
lightness määritellään asteikolla 0%-100% tummasta valoisaan. 50% on keskiväri, jossa ei ole yhtään valkoista tai mustaa.

Lue lisää hsl:sta englanniksi

background:hsl(200 100% 50%);

background: 
  linear-gradient(
    90deg, 
    hsl(240 100% 50%), 
    hsl(200 100% 50%), 
    hsl(160 100% 50%), 
    hsl(100 100% 50%), 
    hsl(60 100% 50%)
  )
;

LCH

lch tulee sanoista lightness, chroma ja hue eli valoisuus, värin määrä ja värisävy.

lightness määritellään asteikolla 0-100 tummasta valoisaan
chroma määritellään asteikolla 0-100 värittömästä voimakkaaseen
hue määritellään asteikolla 0-360, missä esim. 100 on vihreä ja 200 sininen

Lue lisää lch:sta englanniksi

background: 
  linear-gradient(
    90deg, 
    lch(5% 100% 290), 
    lch(40% 100% 200), 
    lch(70% 100% 180), 
    lch(90% 100% 120), 
    lch(100% 100% 100)
  )
;

OKLCH

oklch värisysteemi on samankaltainen kuin lch, mutta säilyttää värien havaintoon perustuvan kirkkauden paremmin.

Lue lisää oklch:sta englanniksi

background: 
  linear-gradient(
    90deg, 
    oklch(30% 100% 245), 
    oklch(40% 100% 200), 
    oklch(60% 100% 170), 
    oklch(80% 100% 130), 
    oklch(100% 100% 100)
  )
;

Lue lisää väreistä englanniksi

background:
  linear-gradient(
    lch( 60  40  270 ),
    lch( 60  5   200 ) 70%,
    lch( 40  30  270 ) 71%,
    lch( 10  20  220 ),
    lch( 5   10  270 )
  )
;

background:
  linear-gradient(
    to right,
    lch(5 10 50),
    lch(30 5 70),
    lch(60 10 100),
    lch(40 10 200),
    lch(0 10 50)
  )
;

Yhdistele useita liukuvärejä

Liukuvärejä voidaan laittaa päällekkäin käyttämällä useita linear-gradient() -funktioita peräkkäin.

Huomioi seuraavat asiat:

linear-gradient() -funktiot erotetaan toisistaan pilkulla
Ensimmäisenä määritelty liukuväri näkyy päällimmäisenä.
Päällekkäisillä liukuväreillä tulee olla läpinäkyviä alueita, esim. transparent väriä käyttäen. Muuten ensimmäisenä määriteltyy liukuväri peittää alleen sen jälkeen tulevat.

background:
  linear-gradient(
    transparent,
    lime,
    transparent
  ),
  linear-gradient(
    90deg,
    red,
    blue
  )
;

background:
  linear-gradient(
    to right,
    lch(0 5 80),
    transparent, 
    lch(0 5 0)
  ),
  linear-gradient(
    lch(0 5 0),
    lch(30 10 70),
    lch(60 20 250),
    lch(80 20 250),
    lch(40 20 250),
    lch(0 5 80)
  )
;

Jos tähän lisätään background-size ominaisuus, liukuväri toistuu eri kokoisena:

background:
  linear-gradient(
    to right,
    lch(0 5 80),
    transparent, 
    lch(0 5 0)
  ),
  linear-gradient(
    lch(0 5 0),
    lch(30 10 70),
    lch(60 20 250),
    lch(80 20 250),
    lch(40 20 250),
    lch(0 5 80)
  )
;
background-size: 50% 10px;

background:
  linear-gradient(
    to right,
    lch(5 10 50),
    lch(30 5 70),
    lch(60 10 100),
    lch(40 10 200),
    lch(0 10 50)
  )
;
background-size: 10% 100%;

Toistuvat suorat liukuvärit

Toistuvia liukuvärejä (engl. repeating gradient) voidaan saada aikaiseksi myös repeating-linear-gradient() -funktiolla.

repeating-linear-gradient() käytettäessä liukuväri toistuu kunnes koko alue on täyttynyt.

background:
  repeating-linear-gradient(
    blue,
    red 20%
  )
;

background:
  repeating-linear-gradient(
    45deg,
    transparent 13px,
    lightgray 14px,
    gray 15px,
    black 16px,
    transparent 29px
  ),
  repeating-linear-gradient(
    -45deg,
    transparent 13px,
    lightgray 14px,
    gray 15px,
    black 16px,
    transparent 16px 29px
  ),
  black
;

background:
  repeating-linear-gradient(
    45deg,
    lightgray,
    gray,
    black,
    transparent 3px 25px
  ),
  repeating-linear-gradient(
    -45deg,
    black,
    gray,
    lightgray,
    transparent 3px 25px
  ),
  linear-gradient(
    lch( 50  30  260 ) 0%,
    lch( 80  20  270 ) 70%,
    lch( 30  5   10  ) 70%,
    gray 90%
  )
;

background:
  repeating-linear-gradient(
    89deg, 
    transparent 0 40px, 
    red 43px, 
    transparent 60px 100px
  ),
  repeating-linear-gradient(
    91deg, 
    transparent 0 85px, 
    blue 97px, 
    transparent 100px
  ),
  repeating-linear-gradient(
    -1deg, 
    transparent 0 40px, 
    orange 43px, 
    transparent 60px 100px
  ),
  repeating-linear-gradient(
    1deg, 
    transparent 0 85px, 
    purple 97px, 
    transparent 100px
  )
;

background:
  repeating-linear-gradient(
    to right,
    lch(0 10 200),
    transparent, 
    lch(0 0 50) 10%
  ),
  repeating-linear-gradient(
    lch(20 10 50),
    lch(40 10 70),
    lch(5 10 50),
    transparent 3px 2%
  ),
  repeating-linear-gradient(
    to right,
    lch(5 10 50),
    lch(30 10 70),
    lch(60 10 100),
    lch(40 10 200),
    lch(0 10 50) 10%
  )
;

background: 
  repeating-linear-gradient(
    to top left, 
    lch(0 10 200) 0, 
    transparent 25%, 
    lch(0 10 10) 50%
  ),
  repeating-linear-gradient(
    45deg, 
    lch(10 30 10) 0, 
    lch(60 40 70) 10%, 
    lch(0 10 10) 15%
  )
;
background-size: 
  50px 100px, 
  5px 50px
;

Yhdistelemällä liukuvärejä niiden potentiaali avautuu uudelle tasolle:

2. Säteittäiset liukuvärit

Säteittäiset liukuvärit saadaan aikaan radial-gradient() -funktiolla.

Säteittäiset liukuvärit lähtevät keskipisteestä reunoja kohti säteen muodossa.

background: 
  radial-gradient(
    red, 
    blue
  )
;

Säteittäiset liukuvärit toimivat samalla periaatteella kuin suorat liukuvärit. Määritellään värit ja niiden sijainnit:

background: 
  radial-gradient(
    yellow 0% 30%, 
    red 50% 100%
  )
;

Voit vaihtaa sädettä:

background: 
  radial-gradient(
    circle closest-side,
    black 100%,
    gray
  )
;

Säteen muodon voi määritellä avainsanoilla circle tai ellipse ja sen jälkeen mihin säde ulottuu, vaihtoehtoina closest-corner, closest-side, farthest-corner, tai farthest-side.

Esimerkiksi:

background: 
  radial-gradient(
    circle farthest-side,
    black 100%,
    gray
  )
;

background: 
  radial-gradient(
    ellipse farthest-side,
    black 100%,
    gray
  )
;

Säteen voi määritellä myös prosenttiluvuilla:

background: 
  radial-gradient(
    50% 50%,
    black 100%,
    gray
  )
;

background: 
  radial-gradient(
    30% 10%,
    black 100%,
    gray
  )
;

Keskipisteen sijainnin voi määritellä avainsanalla at jonka jälkeen tulee joko top / center / bottom ja left / center / right:

background: 
  radial-gradient(
    circle at bottom left,
    purple,
    orange
  )
;

...tai prosenttiluvuilla:

background: 
  radial-gradient(
    ellipse at 50% 80%,
    purple,
    orange
  )
;

background: 
  radial-gradient(
    10% 100% at 50% 0%,
    purple,
    orange
  )
;

background: 
  radial-gradient(
    150% 200% at 50% -60%,
    purple 30%,
    orange
  )
;

background: 
  radial-gradient(
    ellipse at center,
    oklch(70% 100% 290) 30%,
    oklch(70% 100% 0) 60%,
    oklch(70% 100% 100) 100%
  )
;

background:
  radial-gradient(
    100% 100% at center,
    transparent 0 40%, 
    orange 40%,
    lch(40 30 270),
    lch(0  20 250),
    lch(60 20 250),
    lch(40 20 250),
    black 50%,
    transparent 50% 100% 
  )
;

background: 
  radial-gradient(
    50% 45% at 50% 50%, 
    transparent 0 40%,
    oklch(10% 20% 70) 55%,
    transparent 60% 100%
  ),
  radial-gradient(
    30% 30% at 40% 40%, 
    oklch(100% 30% 60) 0 10%,
    oklch(80% 50% 90) 20%,
    transparent 50% 100%
  ),
  radial-gradient( 
    30% 50% at 50% 50%,
    oklch(10% 20% 90) 0% 40%,
    transparent 55% 100%
  ),
  radial-gradient(
    60% 50% at 50% 50%, 
    oklch(40% 70% 120) 0 40%,
    oklch(70% 60% 50) 50%,
    transparent 60% 100%
  )
;
background-size: 50% 100%;

background: 
  radial-gradient(
    50% 100% at center,
    lch(96 15 116),
    lch(56 12 210),
    lch(20 110 210) 100%,
    transparent
  )
;
background-size:
  20% 10%
;

repeating-radial-gradient toistaa kuvioita säteittäin:

background:
  repeating-radial-gradient(
    circle,
    black,
    white 10%
  )
;

background:
  repeating-radial-gradient(
    circle at top left,
    white 0 1px,
    transparent 1px 20px
  ),
  repeating-radial-gradient(
    circle at bottom left,
    white 0 1px,
    transparent 1px 20px
  ),
  repeating-radial-gradient(
    circle at top right,
    white 0 1px,
    transparent 1px 20px
  ),
  repeating-radial-gradient(
    circle at bottom right,
    white 0 1px,
    transparent 1px 20px
  ),
  black
;
background-size: 100px 100px;

background:
  radial-gradient(
    circle,
    lch(13 39 30) 30%,
    transparent 30% 
  ),
  radial-gradient(
    circle,
    lch(75 4 70) 30%,
    transparent 80%
  ),
  repeating-radial-gradient(
    circle,
    lch(41 78 42),
    lch(23 53 39) 10%
  )
;
background-blend-mode:
  normal,
  color-dodge,
  normal
;

3. Kartiomaiset liukuvärit

Kartiomaiset liukuvärit saadaan aikaan conic-gradient() -funktiolla.

Ne kiertävät keskipisteen ympäri (sen sijaan että ne säteilevät keskipisteestä).

background:
  conic-gradient(
    red,
    blue
  )
;

Kartiomaiset liukuvärit toimivat samalla periaatteella kuin säteittäiset ja suorat liukuvärit. Määritellään värit ja niiden sijainnit:

background: 
  conic-gradient(
    yellow 40%, 
    red 50%,
    blue 90% 100%
  )
;

Voit vaihtaa kierron alkamiskohtaa:

background:
  conic-gradient(
    from 45deg,
    red,
    blue
  )
;

Kierron alkamiskohta määritellään avainsanalla from jonka jälkeen tulee asteen määrä 0deg – 360deg:

background:
  conic-gradient(
    from 90deg,
    blue,
    red,
    blue
  )
;

Tai vaihtoehtoisesti 0.0turn – 1.0turn

background:
  conic-gradient(
    from 0.25turn,
    blue,
    red,
    blue
  )
;

Voidaan määritellä myös keskipiste avainsanalla at, samaan tapaan kuin säteittäisillä liukuväreillä:

background:
  conic-gradient(
    from 90deg at 50% 100%,
    blue,
    red,
    blue
  )
;

background:
  conic-gradient(
    from 0.25turn at top left,
    red,
    blue 25%
  )
;

background:
  conic-gradient(
    from 0.5turn at top center,
    white,
    black 2%,
    transparent 2% 98%,
    black 98%,
    white
  )
;
background-size: 10% 100%;

background:
  conic-gradient(
    oklch(50% 100% 0),
    oklch(50% 100% 20),
    oklch(50% 100% 40),
    oklch(50% 100% 60),
    oklch(50% 100% 80),
    oklch(50% 100% 100),
    oklch(50% 100% 120),
    oklch(50% 100% 140),
    oklch(50% 100% 160),
    oklch(50% 100% 180),
    oklch(50% 100% 200),
    oklch(50% 100% 220),
    oklch(50% 100% 240),
    oklch(50% 100% 260),
    oklch(50% 100% 280),
    oklch(50% 100% 300),
    oklch(50% 100% 320),
    oklch(50% 100% 340),
    oklch(50% 100% 360)
  )
;

background:
  repeating-radial-gradient(
    circle at center,
    lch(30 20 260 / 50%),
    transparent 1px
  ),
  conic-gradient(
    from 25deg at 50% 50%,
    lch(80 10 230),
    transparent,
    lch(70 10 230) 0.25turn,
    transparent,
    lch(60 10 260) 0.5turn,
    transparent,
    lch(50 20 270) 0.75turn,
    transparent,
    lch(80 10 230) 1turn
  ),
  conic-gradient(
    from -15deg at 50% 50%,
    white,
    lch(10 20 300),
    white 0.25turn,
    lch(20 40 300),
    white 0.5turn,
    lch(10 20 300),
    white 0.75turn,
    lch(70 20 300),
    white 1turn
  )
;

background:
  radial-gradient(
    oklch(80% 40% 70 / 100%) 0 10%,
    transparent 90%
  ),
  conic-gradient(
    from 0.25turn,
    oklch(50% 40% 130) 10%,
    oklch(20% 0% 200) 10% 10.5%,
    white 10.5% 11%,
    oklch(20% 0% 200) 10% 39%,
    white 39% 39.5%,
    oklch(20% 0% 0) 39% 40%,
    oklch(50% 40% 130) 40% 50%,
    oklch(60% 40% 210) 46%
  )
;
background-blend-mode: 
  hard-light,
  normal
;

Toistuvat kartiomaiset liukuvärit

repeating-conic-gradient() toistaa värien kierron:

background:  
  radial-gradient(
    circle,
    yellow 0 20%,
    transparent 20%
  ),
  repeating-conic-gradient(
    yellow 0 2%,
    orange 2% 4%
  )
;

background:  
  repeating-conic-gradient(
    from 0deg at 50% 100%,
    yellow 0.01%,
    blue 0.04%
  )
;