# Revontuliliukuvärit: pehmeää valoa, tehtynä oikein

[Canonical HTML page](https://gradiently.design/fi/guide/aurora-gradients)

Revontuliliukuvärit lainaavat revontulten ilmeen: hehkuvia värisilmukoita, jotka ajelehtivat pimeyden yllä. Ne ovat kauniita ja kääntyvät nopeasti näytönsäästäjäksi. Tässä miten pidät ne oikealla puolella.

## The short version

- Revontuliliukuväri on tumma tausta, jossa on pehmeitä, voimakkaasti sumennettuja hohtavan värin läiskiä tai verhoja revontulten mallin mukaan.
- Revontuliliukuvärit toimivat, koska vaaleat värit lähes mustalla pohjalla näyttävät hehkuvan, kuten oikea valo yöllä.
- Uskottavimmat revontulipaletit pysyvät lähellä oikeiden revontulten värejä: vihreät, petrooli, violetit ja hieman ruusua.
- Revontuliliukuväri näyttää näytönsäästäjältä, kun siinä on liikaa kylläisiä värejä, se liikkuu liian nopeasti tai täyttää koko ruudun tasaisesti.
- Revontulen päällä oleva teksti kuuluu tummimmalle alueelle, ja kirkkain verho pidetään kaukana sanoista.

**Revontuliliukuväri** on tausta, jossa pehmeä, hohtava väri leijuu tumman pohjan päällä kuin revontulet: vihreän, petroolin ja violetin verhoja, jotka näyttävät hehkuvan eivätkä istuvan pinnalla. Teknisesti se on joukko voimakkaasti sumennettuja väriläiskiä tai kaistoja lähes mustalla pohjalla, usein hyvin hitaasti liikkuvina. Se on yksi tunnelmallisimmista liukuvärin ilmeistä ja yksi helpoimmin liioiteltavista.

## Mikä tekee revontuliliukuvärin erilaiseksi

Kolme asiaa erottaa revontulen tavallisesta tummasta liukuvärista. Ensinnäkin pohja on hyvin tumma, lähes musta, joten mikä tahansa sen päällä oleva väri näyttää valolta. Toiseksi väri tulee pehmeinä, epätasaisina verhoina tai läiskinä eikä sileänä siirtymänä puolelta toiselle. Kolmanneksi reunat on sumennettu äärimmäisen paljon, joten millään ei ole muotoa, jota voisi jäljittää. Yhdessä ne luovat vaikutelman valosta ilmassa eikä maalista seinällä.

- Pohjoinen vihreä: `radial-gradient(ellipse 80% 38% at 50% 32%, #6ee7b7 0%, #10b981 22%, #064e3b 48%, #020617 80%)`
- Violetti verho: `radial-gradient(ellipse 75% 40% at 40% 30%, #c4b5fd 0%, #7c3aed 25%, #2e1065 52%, #05030f 82%)`
- Arktinen petrooli: `radial-gradient(ellipse 85% 35% at 60% 28%, #67e8f9 0%, #0891b2 25%, #083344 50%, #020617 80%)`
- Ruusuinen hämärä: `radial-gradient(ellipse 80% 38% at 45% 30%, #fda4af 0%, #e11d48 22%, #4c0519 50%, #0a0206 80%)`

Yksikerroksisia revontuliluonnoksia: leveä, litteä valon ellipsi ruudun yläosassa, joka laskeutuu lähes mustaan. Oikeat revontulialueet kerrostavat useita tällaisia.

## Revontulipaletit, jotka toimivat

Oikeat revontulet saavat värinsä ilmakehän korkealla olevista kaasuista: happi antaa tutun vihreän ja korkeammalla syvän punaisen, kun taas typpi lisää sinisiä ja violetteja. Tämän perheen lähellä pysyminen on syy, miksi jotkin revontuliliukuvärit näyttävät luonnollisilta ja toiset yökerholta. Aloita vihreällä tai petroolilla, lisää violetti ja käytä ruusua tai punaista harvinaisena korostuksena.

- Napayö: #030712
- Syvä kuusi: #064e3b
- Revontulenvihreä: #34d399
- Jäätikön petrooli: #22d3ee
- Ylävioletti: #8b5cf6
- Harvinainen ruusu: #fb7185

Todellisuudesta poimittu revontulipaletti. Vihreä ja petrooli kantavat aluetta, violetti tuo syvyyttä, ruusu näkyy vain yhdellä reunalla.

Luonnosta voi tietenkin poiketa. Lämpimät revontulet meripihkassa ja korallissa tai yksiväriset yhdessä sinisessä toimivat molemmat, kunhan pohja pysyy tummana ja värit naapureina. Yhteen sopivien värien valinnasta lisää artikkelissa [analogiset värit](https://gradiently.design/fi/guide/analogous-colors).

## Miten estät revontulen näyttämästä näytönsäästäjältä

### Näytönsäästäjä

- Viisi tai useampi täysin kylläinen väri
- Väri levitetty tasaisesti reunasta reunaan
- Nopea, silmukkana toistuva liike, jota voi seurata
- Täysin sileät, näkyvästi raidoittuneet tummat alueet
- Keskitetyt, symmetriset läiskät

### Revontuli tehtynä oikein

- Kaksi tai kolme toisiinsa liittyvää väriä lähes mustalla
- Suurin osa ruudusta jää tummaksi, valo yhdellä alueella
- Liike niin hidas, että sen huomaa vasta toisella katsomalla
- Hieno rake tummien alueiden päällä
- Verhot, jotka kallistuvat ja ajelehtivat pois yhdeltä reunalta

Pimeys on tärkein ainesosa. Revontuli tarvitsee enemmän tummaa kuin valaistua aluetta, koska hehku erottuu vain sitä vasten. Sama pimeys on paikka, jossa raidoittuminen näkyy ensin: pitkät, hienovaraiset siirtymät tummasta petroolista mustaan porrastuvat näkyvästi useimmilla näytöillä. Hieno rake korjaa sen, kuten [liukuvärien raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) ja [tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) selittävät.

## Miten rakennat revontuliliukuvärin CSS:llä

Tavallinen tekniikka on muutama säteittäinen liukuväri, jotka on muotoiltu leveiksi, litteiksi ellipseiksi ja sumennettu yhteen ylisuurella kerroksella sisällön takana. Pseudoelementin sumentaminen maksaa enemmän kuin tavallinen liukuväri, joten pidä kerrosten määrä pienenä ja animaatio hitaana ja pysäytä liike niille, jotka suosivat vähennettyä liikettä.

```css
.aurora {
  position: relative;
  overflow: hidden;
  background: #030712;
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 30%, #34d399cc, transparent 70%),
    radial-gradient(ellipse 35% 20% at 62% 26%, #22d3eeaa, transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 48%, #8b5cf699, transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

.aurora > * {
  position: relative; /* keep content above the light */
}

@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}
```

Kolme sumennettua verhoa lähes mustalla pohjalla, jotka ajelehtivat 30 sekunnin ajan. Negatiivinen inset piilottaa sumennuksen synnyttämät pehmeät reunat.

Liukuvärien sujuvasta animoinnista lisää artikkelissa [animoidut liukuväritaustat](https://gradiently.design/fi/guide/animated-gradient-background). Liikeasetusten kunnioittamisesta katso [vähennetty liike](https://gradiently.design/fi/guide/reduced-motion).

## Typografia revontulella

Revontulitaustat ovat anteliaita typografialle, koska suurin osa ruudusta on tumma. Aseta vaalea teksti tummimmalle alueelle ja pidä kirkkain verho kaukana sanoista. Virhe on keskittää hehku ja otsikko yhdessä, jolloin kirjaimet ovat alueella, jossa on vähiten kontrastia.

Tapahtumajuliste, jossa revontuliliukuvärin kirkas osa on otsikon takana

Valo ja sanat kilpailevat, kun hehku kulkee suoraan otsikon takana.

Sama tapahtumajuliste, jossa liukuvärin tummempi alue on otsikon takana

Kun tumma pohja on sanojen takana, revontuli kehystää ne.

## Mihin revontuliliukuvärit sopivat

- Musiikki-, uni-, meditaatio- ja hyvinvointibrändit, joissa rauhallinen valo sopii tuotteeseen
- Yötapahtumat, planetaariot, tähtitiede ja matkailu pohjoisiin paikkoihin
- Teknologialanseeraukset, jotka haluavat tunnelmaa ilman neonia
- Taustakuvat ja lukitusnäytöt, katso [liukuvärintaustakuva](https://gradiently.design/fi/guide/gradient-wallpaper)
- Silmukkana toistuvat videotaustat, joissa hidas ajelehtiminen on koko pointti

Se sopii huonommin sinne, missä ihmisten täytyy lukea paljon tai verrata lukuja. Kojelaudat, hintataulukot ja pitkät artikkelit tarvitsevat hiljaisen, tasaisen pinnan, ja niiden takana ajelehtiva hehku muuttuu häiriöksi. Se myös taistelee kirkkaita, päiväaikaisia brändejä vastaan: napayöhön kääritty leipomo tai lastenleluliike näyttää oudolta. Näissä tapauksissa lainaa vain pehmeys, yhtenä vaaleana hehkuna vaalealla pohjalla.

> **Yksi revontuli per ruutu** Revontuli on tunnelma, ei kuvio. Käytä sitä kerran, hero-alueen, kannen tai tarinan taustana, ja anna muun sivun pysyä rauhallisena. Toistettuna jokaisella kortilla se lakkaa tuntumasta valolta ja alkaa tuntua koristeelta.

Koska revontuli riippuu hitaasta liikkeestä, se on parhaimmillaan silmukkana eikä still-kuvana. Gradientlyssä lunastamallasi Markilla tehdyt suunnitelmat voi viedä viidestä 30 sekuntiin kestävinä saumattomina silmukoina, joiden liikkeen ja tahdin valitset.

## FAQ

### Mikä on revontuliliukuväri?

Revontuliliukuväri on tumma tausta, jossa on pehmeitä, sumennettuja hohtavan värin verhoja tai läiskiä revontulten inspiroimana.

### Mitkä värit sopivat parhaiten revontuliliukuväriin?

Vihreät, petrooli ja violetit lähes mustalla pohjalla näyttävät luonnollisimmilta, ja ruusu tai punainen harvinaisena korostuksena. Pidä kahdessa tai kolmessa värissä.

### Miten teen revontuliliukuvärin CSS:llä?

Pinoa muutama leveä, litteä `radial-gradient`-ellipsi pseudoelementille, sumenna se `filter: blur()` -ominaisuudella, aseta se lähes mustan taustan päälle ja animoi hitaasti.

### Miksi revontuliliukuväritaustassani on raitoja?

Pitkät, hienovaraiset tummat siirtymät raidoittuvat useimmilla näytöillä. Lisää hieno rake tummien alueiden päälle ja vältä voimakasta pakkausta.

### Minne teksti kuuluu revontuliliukuvärillä?

Tummimmalle alueelle, kauas kirkkaimmasta verhosta, jotta vaalealla tekstillä on eniten kontrastia.