# Galaksiliukuväri: kosmiset koodit syvään avaruuteen

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

Galaksi ei ole väri vaan syvyyttä: tumma pohja, valopilviä ja niiden sekaan siroteltuja valkoisia pisteitä. Tässä koodit ja kerrokset uskottavaan lopputulokseen.

## The short version

- Galaksiliukuväri rakentuu lähes mustasta pohjasta, yhdestä tai kahdesta pehmeästä tähtisumupilvestä ja pienistä tähdistä.
- Säteittäiset liukuvärit sopivat galakseihin lineaarisia paremmin, koska tähtisumut hehkuvat kirkkaasta keskuksesta ulospäin.
- Suurimman osan galaksitaustasta pitäisi pysyä tummana, ja väriä voi olla noin kolmanneksessa kuvasta.
- Kahden tähtisumuvärin sijoittaminen kauas toisistaan välttää samean harmaan, jota syntyy vastakkaisten sävyjen päällekkäisyydestä.
- Hyvin tummat liukuvärit raidoittuvat helposti, joten galaksitausta tarvitsee kevyen rakeisuuskerroksen ennen vientiä.

**Galaksiliukuväri** on pehmeää tähtisumun väriä lähes mustasta pohjasta hehkuen: violetteja, magentoja, petrooleja tai hiillospilviä, jotka häipyvät syvään avaruuteen. Päällä on usein ripaus pieniä tähtiä. Salaisuus on mittasuhteissa. Oikeat avaruuskuvat ovat enimmäkseen tummia, ja väri asuu yhdessä tai kahdessa pilvessä koko kuvan sijaan. Alta löydät tärkeimpien tähtisumuperheiden kopioitavat koodit ja kokonaisen kerrostetun tähtikentän CSS:llä.

## Mikä saa liukuvärin näyttämään galaksilta

Violetin sekoitus siniseen on vain violetti liukuväri. Se alkaa näyttää avaruudelta, kun siinä on neljä tähtitieteen kuvista odotettua asiaa:

- **Lähes musta pohja**, joka taittuu hieman siniseen tai violettiin neutraalin sijaan.
- **Tähtisumupilvet**, jotka hehkuvat kirkkaasta ytimestä ja häipyvät epätasaisesti. Tämä on säteittäisten liukuvärien tehtävä.
- **Kirkkaampi ydin** kirkkaimman pilven sisällä: vaaleanpunainen, lila tai kermanvärinen, lähellä valkoista.
- **Tähdet**: paljon pieniä valkoisia ja vaaleansinisiä pisteitä, muutama suurempi, siroteltuina ilman kuviota.

- Syvä avaruus: #03020a
- Tyhjyyden indigo: #1a1240
- Tähtisumun violetti: #6d28d9
- Kosminen magenta: #c026d3
- Syvä petrooli: #0e7490
- Ionipetrooli: #2dd4bf
- Hiillos: #fb923c
- Tähden ydin: #fdf4e3

Galaksipaletti. Valitse pohja, yksi tähtisumuperhe ja tähden ydin. Kaikkien värien käyttäminen kerralla muuttaa avaruuden sateenkaareksi.

## Galaksiliukuvärin koodit

Jokainen näistä on yksittäinen säteittäinen liukuväri, jonka voit liittää suunnittelutyökaluun tai tyylitiedostoon. Paino on tarkoituksella tummassa päässä. Violetti on klassinen **avaruusliukuväri**, petrooli tuntuu kylmemmältä ja tieteellisemmältä, hiillos kuolevalta tähdeltä tai tieteisjulisteelta.

- Violetti tähtisumu: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Petrooli tähtisumu: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Hiillostähtisumu: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Pinkki kosminen pöly: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Kierregalaksin ydin: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Linnunradan vyö: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Kuusi galaksiliukuväriä. Kierteen ydin käyttää litteää ellipsiä, ja Linnunradan vyö on kirkas raita tumman taivaan läpi.

Jos haluat lähemmäs kotia, syvän avaruuden sijaan taivaan tähtineen ja kuineen, [yötaivaan liukuvärikoodit](https://gradiently.design/fi/guide/night-sky-gradient) ovat lempeämpiä. Vihreän ja violetin valon verhot löydät [revontuliliukuväreistä](https://gradiently.design/fi/guide/aurora-gradients).

## Galaksitausta CSS:llä kerros kerrokselta

Yksi liukuväri antaa tähtisumun. Galaksi syntyy useiden pinoamisesta. CSS sopii siihen hyvin, koska `background-image` hyväksyy listan. Ensimmäinen listattu kerros piirretään päälle.

1. **Aseta pohja** Leveä säteittäinen liukuväri keskiosan tyhjyyden indigosta reunojen syvään avaruuteen estää kuvaa näyttämästä tasaiselta.
2. **Lisää päätähtisumu** Värillinen säteittäinen liukuväri häipyy `transparent`-arvoon ja sijoitetaan pois keskeltä, suunnilleen kolmanneslinjojen risteykseen.
3. **Lisää toinen pienempi pilvi** Eri sävy kauas ensimmäisestä pienemmällä peittävyydellä. Se lisää syvyyttä kilpailematta huomiosta.
4. **Sirottele tähdet** Pienet säteittäiset pisteet toistuvat kahdessa tai kolmessa koossa, jotta toistot eivät asetu näkyväksi ruudukoksi.
5. **Viimeistele rakeisuudella** Hento kohinakerros kaiken päällä peittää tummien alueiden raidat ja tekee ilmeestä valokuvamaisen.

```css
.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}
```

Kokonainen galaksi yhdessä säännössä. Koska tähtilaatat ovat 180, 260 ja 420 pikseliä, kuvio toistuu vain niiden kaikkien osuessa yhteen, mikä tapahtuu harvoin.

Säteittäinen syntaksi, kuten `ellipse 60% 25%` ja väripisteiden paikat, selitetään [CSS:n säteittäisessä liukuvärissä](https://gradiently.design/fi/guide/css-radial-gradient). Rakeisuuteen [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture) tarjoaa kopioitavan SVG-suodatinratkaisun.

## Galaksiliukuvärin pitäminen puhtaana

Tavallisin epäonnistuminen on mustelmalta näyttävä galaksi: päällekkäiset värit sekoittuvat ruskeaksi tai harmaaksi ja väri leviää niin tasaisesti, ettei mikään hehku. Hehku tarvitsee ympärilleen pimeyttä. Korjaus on lähes aina vähemmän väriä huolellisemmin sijoitettuna. Taustalla oleva väriteoria löytyy [sameista liukuväreistä](https://gradiently.design/fi/guide/muddy-gradients).

### Näyttää samealta

- Violetti, petrooli ja oranssi päällekkäin keskellä
- Väriä koko kuvan alueella
- Neutraalin harmaa tai puhtaan musta pohja
- Tähdet siistissä näkyvässä ruudukossa
- Sileä puhdas digipinta, jossa näkyy raitoja

### Näyttää syvältä avaruudelta

- Yksi pääpilvi ja pieni kumppani kaukana toisistaan
- Väriä noin kolmanneksessa, muu tummaa
- Indigoon tai siniseen taittuva pohja
- Erikokoisina toistuvat tähdet
- Hieno rakeisuus kaiken päällä

## Sanat galaksitaustalla

Galaksitausta sopii valkoiselle tai hyvin vaalealle tekstille, parhaiten kuvan tummassa osassa eikä tähtisumun kirkkaassa ytimessä. Aseta otsikko tyhjään tilaan ja pilvi toiselle puolelle. Tähdet pienen tekstin takana ovat todellinen ongelma: ne näyttävät irrallisilta pisteiltä. Pidä leipätekstin tausta vapaana suuremmista tähdistä tai jätä alueelta tähdet kokonaan pois.

Leveä suunnitelma syvän avaruuden taustalla, hehkuva väripilvi sivussa ja valkoinen teksti Lanseerausilta

Striimi-ilmoitus YouTuben pikkukuvakoossa. Sanat ovat tummassa puolikkaassa, väri toisella puolella.

Tällaista tasapainoa Gradiently hallitsee itse. Mark tietää sanojen paikan, siirtää rauhallisimman ja parhaiten erottuvan alueensa niiden taakse sekä vähentää levotonta yksityiskohtaisuutta kirjainten lähellä. Kosminen tausta ei siis niele otsikkoa. Markeissa voi olla myös hidasta liikettä, mikä sopii galaksiin paremmin kuin pysäytyskuva.

## Missä galaksiliukuvärit toimivat parhaiten

| Käyttö | Koko | Vinkki |
| --- | --- | --- |
| Twitchin offline-näkymä | 1920×1080 | Tähtisumu toiselle puolelle, aikataulu tummalle puolelle |
| YouTuben kanavakuva | 2560×1440 | Pidä ydin keskellä turva-alueen lähellä |
| Discord-palvelimen banneri | 960×540 | Vain yksi pilvi, sillä kuva näkyy pienenä |
| Puhelimen taustakuva | 1080×1920 | Aseta tähtisumu alas, pois kellon tieltä |
| Albumin tai soittolistan kansi | 1080×1080 | Kierteen ydin keskellä toimii symbolina |
| Tapahtumajuliste | A4 300 dpi:llä, 2480×3508 | Paino tummentaa syviä sävyjä, joten vaalenna pohjaa hieman |

Galaksiliukuvärit ovat kotonaan pelaamisessa, musiikissa, tekniikassa ja yöllä tapahtuvissa asioissa.

Pelaaminen ja striimaus ovat luontevia käyttökohteita. [Twitch-striimaajan brändäys](https://gradiently.design/fi/guide/twitch-streamer-branding) näyttää saman ilmeen säilyttämisen paneeleissa, bannereissa ja päällysteissä. Lisää hehkuvia tummia pohjia löydät [tummista liukuväritaustoista](https://gradiently.design/fi/guide/dark-gradient-backgrounds).

## FAQ

### Mitä värejä galaksiliukuvärissä on?

Lähes musta pohja, kuten #03020a, tähtisumuväri, kuten violetti #6d28d9, magenta #c026d3 tai petrooli #2dd4bf, ja lähes valkoinen vaalea ydin. Suurin osa kuvasta jää tummaksi.

### Miten teen galaksitaustan CSS:llä?

Pinoa useita säteittäisiä liukuvärejä `background-image`-arvoon: tumma pohja, yksi tai kaksi läpinäkyväksi häipyvää tähtisumupilveä ja tähdiksi pienet pisteet eri `background-size`-arvoilla.

### Miksi avaruusliukuvärini näyttää samealta?

Vastakkaiset värit menevät päällekkäin ja liian suuri osa kuvasta on värillinen. Käytä yhtä pääpilveä, pidä toinen sävy kaukana ja anna tumman pohjan hallita.

### Mikä tekstiväri sopii galaksitaustalle?

Valkoinen tai hyvin vaalea lila tai sininen, kuvan tummassa osassa tähtisumun kirkkaan ytimen sijaan.