# Yötaivaan liukuväri: syvät siniset, tähdet ja kuunvalo

[Canonical HTML page](https://gradiently.design/fi/guide/night-sky-gradient)

Uskottava yötaivas ei ole tasainen tummansininen pinta. Siinä on tumma laki, hohtava horisontti ja jostakin tuleva valo. Tässä värit, koodit ja pienet uskottavuutta luovat yksityiskohdat.

## The short version

- Yötaivaan liukuväri on tummin kuvan yläosassa ja vaalein horisontissa, koska pään yläpuolinen taivas on kauimpana jäljellä olevasta valosta.
- Oikea yötaivas on harvoin puhtaan musta: siinä on syvää tummansinistä, indigoa ja siniharmaata sekä lämpimämpi tai vihertävämpi kaista horisontissa.
- Tähdet voi piirtää CSS:llä pieninä säteittäisinä liukuväreinä taivaan päälle, kukin eri toistokoolla, jotta kuvio ei näytä ruudukolta.
- Kuu näyttää parhaimmalta pienenä kirkkaana säteittäisenä liukuvärinä, joka hiipuu leveästi ja hennosti ympäröivään siniseen.
- Tummansiniset liukuvärit porrastuvat helposti, joten lisää kevyttä rakeisuutta ja vie PNG:nä tai laadukkaana videona voimakkaasti pakatun JPEG:n sijaan.

**Yötaivaan liukuväri** on pystysuuntainen liuku lähes mustasta yläosasta pehmeämpään siniseen horisontissa. Aivan alareunassa on usein hento lämmin tai sinivihreä kaista. Suunta on tärkeä: taivaan laki on yön tummin osa, ja horisontissa on vielä kaupungin, laskevan auringon tai kuun hajavaloa. Kun järjestys on oikein, jo kaksi väriä näyttää yöltä. Kuu, muutama tähti ja rakeisuus tekevät siitä paikan.

## Oikean yötaivaan värit

Pimeän taivaan valokuvissa on hyvin vähän puhdasta mustaa. Taivaan laki on syvän tummansininen, jossa on häivähdys violettia. Keskiosa on indigoa tai liuskekiven sävyinen. Horisonttiin tarttuu ympäristön valo: katuvalojen oranssi, sinisen hetken lila tai korkeiden leveysasteiden revontulten hento vihreä. Näiden valitseminen erillisiksi väripisteiksi erottaa yötaivaan tavallisesta [tummansinisestä liukuväristä](https://gradiently.design/fi/guide/navy-gradient).

- Taivaan laki: #020611
- Syvä tummansininen: #0b1a3a
- Yönsininen: #1e3a6e
- Horisontin sininen: #3b5b8f
- Kaupungin hehku: #8a5a4a
- Kuunvalo: #f4f1e3

Toimiva yöpaletti: neljä sinistä ylhäältä alas, yksi lämmin horisonttisävy ja hieman kermanvärinen kuunvalkoinen puhtaan valkoisen sijaan.

## Yötaivaan liukuvärikoodit

Jokainen kulkee ylhäältä alas 180 asteessa, joten tummin väri jää kuvan yläosaan. Kopioi sellaisenaan tai vaihda horisontin väripiste muuttaaksesi aikaa ja ympäristöä.

- Kirkas keskiyö: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Sininen hetki: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Kaupungin hehku: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Kaamos: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Aavikon pimeys: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Kuun nousu: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Kuusi taivasta. Sinisen hetken horisontti on lila, kaupungin hehku natriuminoranssi, kaamoksessa on häivähdys sinivihreää ja kuun nousua valaisee yksi kirkas piste.

Huomaa, etteivät väripisteet ole tasavälein. Suurin osa kuvasta pysyy tummana ja väri muuttuu alimmassa viidenneksessä, kuten oikeassa horisontissa. Tasaväli tekee taivaasta rampin kupolin sijaan. Epätasaisten välien perusteet löytyvät oppaasta [liukuvärin väripisteet](https://gradiently.design/fi/guide/gradient-stops).

## Näin lisäät kuun

Kuu on kolmiosainen säteittäinen liukuväri: pieni lähes valkoinen kiekko, nopea siirtymä vaaleansiniseen ja pitkä hento sädekehä, joka häipyy taivaaseen. Pidä kiekko pienenä, noin 3-5 prosentissa kuvan leveydestä. Suuri pehmeä kuu näyttää kohdevalolta. Aseta se sivuun keskeltä, korkealle kulmaan, ettei se kilpaile otsikon kanssa.

Kuu syvällä tummansinisellä: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

Kermanvärinen kiekko päättyy 2,5 prosenttiin, vaaleansininen rengas 4 prosenttiin ja sädekehä leviää 14 prosenttiin ennen taivasta.

Yhdistä kuu horisontin hehkuun kerrostamalla säteittäinen liukuväri lineaarisen päälle. [Säteittäisen liukuvärin opas](https://gradiently.design/fi/guide/radial-gradient) käsittelee sijainteja ja kokoja tarkemmin.

## Näin piirrät tähdet CSS:llä

Tähdet ovat pieniä säteittäisiä liukuvärejä: terävä valkoinen piste, joka päättyy pikselin murto-osan päässä. Anna kullekin tähtikerrokselle oma `background-size`, jotta toistoväli vaihtelee. 200, 230, 290 ja 170 pikselin laatat toistuvat eri tahdissa, eikä silmä löydä ruudukkoa. Vaihtele myös peittävyyttä: oikeat tähdet eivät ole yhtä kirkkaita.

```css
.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}
```

Neljä tähtikerrosta eri toistoko’oilla, kuu läpinäkyvällä sädekehällä ja alla kirkas keskiyön taivas.

> **Vähemmän tähtiä näyttää aidommalta** Tiheä tähtikenttä näyttää puhelimessa kohinalta. Pidä tähdet harvoina horisontissa, jossa valo himmentää niitä, ja anna muutaman suuremman tähden kantaa näkymää.

## Designideoita yötaivaan liukuvärille

Yötaivas sopii iltatapahtumiin, lanseerauksiin, uni- ja hyvinvointibrändeille, tähtitiedekerhoille, musiikkijulkaisuihin ja kaikkeen pimeällä tapahtuvaan. Tumma yläpuolisko on luonteva paikka vaalealle tekstille, ja kirkkaampi horisontti antaa katseelle perustan. Aseta otsikko keskikohdan yläpuolelle ja pidä kuu siitä erillään. Jos sanat osuvat horisonttikaistaan, tarkista luettavuus: [teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) käsittelee kontrastisääntöjä.

Tähtienkatseluillan pystyjulkaisu, jossa vaalea teksti on korkealla syvänsinisellä yötaivaalla

Instagram-julkaisu koossa 1080×1350, sanat korkealla taivaan tummassa osassa.

Unituotteen pystytarina, jossa on lyhyt rauhallinen otsikko keskiyön sinisellä liukuvärillä

Unibrändin tarina koossa 1080×1920. Korkeampi kuva jättää enemmän taivasta sanojen yläpuolelle.

| Käyttö | Koko | Valon sijoitus |
| --- | --- | --- |
| Puhelimen taustakuva | Tarinakoko 1080×1920 | Horisontin hehku alhaalla telakan alapuolella |
| Verkkosivun pääkuva | 1920×1080 | Kuu oikeassa yläkulmassa, otsikko vasemmalla |
| Tapahtumajulkaisu | 1080×1350 | Hehku alhaalla, sanat korkealla |
| Soittolistan kansi | 1080×1080 | Pieni kuu sivussa keskeltä |
| Diat | 1920×1080 | Pidä taivas tummana otsikon takana |

Yötaivaan kirkkaiden osien sijoittaminen tavallisissa muodoissa.

## Näin estät tummansinisen liukuvärin porrastumisen

Tummansinisessä [liukuvärin porrastuminen](https://gradiently.design/fi/guide/gradient-banding) näkyy selvimmin, koska näytöillä on vähän erottuvia sävyaskelia lähes mustien välillä. Levitä tummimmat väripisteet kauemmas toisistaan, lisää hieno kohinakerros hyvin pienellä peittävyydellä ja vältä voimakasta JPEG-pakkausta. [Tummat liukuväritaustat](https://gradiently.design/fi/guide/dark-gradient-backgrounds) tarjoaa lisää tummia paletteja, ja [galaksiliukuvärit](https://gradiently.design/fi/guide/galaxy-gradient) vie saman taivaan violettiin ja magentaan.

Jos et halua rakentaa rakeisuutta, valoa ja luettavuutta käsin, Gradientlyn Markit ovat eläviä taustoja. Ne piirtyvät kaikissa käyttämissäsi ko’oissa ja rauhoittuvat sanojesi taakse. Hae Markkinoilta värisanoilla kuten ”midnight” tai ”deep navy” ja suunnittele ilmaiseksi millä tahansa lunastamattomalla Markilla.

## FAQ

### Mitkä värit muodostavat yötaivaan liukuvärin?

Aloita ylhäällä lähes mustalla tummansinisellä, kuten `#020611`, jatka sävyihin `#0b1a3a` ja `#1e3a6e` ja päätä horisontin vaaleampaan siniseen, kuten `#3b5b8f`. Lisää aivan alas lämmin tai lila piste kaupungin valolle tai siniselle hetkelle.

### Mihin suuntaan yötaivaan liukuvärin pitää kulkea?

Ylhäältä alas 180 asteessa, tummin ylhäällä. Yöllä pään yläpuolinen taivas on aina horisonttia tummempi.

### Miten lisään tähtiä CSS-liukuväriin?

Kerrostamalla useita pieniä `radial-gradient()`-pisteitä taivaan päälle ja antamalla jokaiselle eri `background-size`-arvon. Toistot kulkevat eri tahdissa eikä synny ruudukkoa.

### Miksi tummansinisessä liukuvärissäni näkyy raitoja?

Se on porrastumista: liian vähän väriaskelia suurella tummalla alueella. Lisää hieman rakeisuutta, levitä tummat väripisteet kauemmas toisistaan ja vie PNG:nä pakatun JPEG:n sijaan.

### Sopiiko yötaivaan liukuväri tekstin taakse?

Kyllä, vaalea teksti erottuu taivaan tummasta yläosasta. Pidä otsikko erillään kuusta ja kirkkaasta horisonttikaistasta.