# Galaksegradient: kosmiske fargekoder i mørkt rom

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

En galakse er ikke en farge, men dybde: en mørk bunn, skyer av lys og spredte hvite punkter. Her er kodene og lagene som gjør uttrykket overbevisende.

## The short version

- En galaksegradient bygges av en nesten svart grunnfarge, én eller to myke skyer med stjernetåkefarge og spredte små stjerner.
- Radielle gradienter passer bedre til galakser enn lineære, fordi stjernetåker gløder utover fra et lyst sentrum.
- Mesteparten av en galaksebakgrunn bør være mørk, med farge på kanskje en tredel av bildet.
- Stor avstand mellom to stjernetåkefarger hindrer det grumsete grå som oppstår der motsatte fargetoner overlapper.
- Svært mørke gradienter får lett synlige bånd, så en galaksebakgrunn trenger et lett kornlag før eksport.

En **galaksegradient** er myk stjernetåkefarge som gløder fra en nesten svart bunn: fiolette, magenta, petroleumsgrønne eller glødende skyer som toner ut i dypt verdensrom, gjerne med et dryss små stjerner over. Hemmeligheten er forholdet mellom lys og mørke. Ekte romfoto er stort sett mørke, og fargen ligger i én eller to skyer fremfor over hele bildet. Nedenfor finner du kopierbare koder for de viktigste stjernetåkefamiliene og et komplett stjernefelt i CSS.

## Hva som får en gradient til å ligne en galakse

En blanding fra lilla til blått er bare en lilla gradient. Den begynner å ligne verdensrommet når den har de fire tingene øyet forventer fra astronomibilder:

- **En nesten svart grunnfarge**, med et svakt blått eller fiolett skjær fremfor en nøytral tone.
- **Stjernetåkeskyer** som gløder fra en lys kjerne og toner ujevnt ut, noe radielle gradienter passer til.
- **En lysere kjerne** inni den lyseste skyen: blek rosa, lys lilla eller krem nær hvitt.
- **Stjerner**: mange små punkter i hvitt og lyseblått, noen litt større, spredt uten mønster.

- Dypt rom: #03020a
- Tomromsindigo: #1a1240
- Tåkefiolett: #6d28d9
- Kosmisk magenta: #c026d3
- Dyp petroleumsgrønn: #0e7490
- Ionegrønn: #2dd4bf
- Glør: #fb923c
- Stjernekjerne: #fdf4e3

En galaksepalett. Velg grunnfargen, én stjernetåkefamilie og stjernekjernen. Bruker du alle fargene samtidig, blir verdensrommet en regnbue.

## Koder til galaksegradienter

Hver av disse er én radiell gradient du kan lime inn i et designverktøy eller stilark. De har bevisst overvekt av mørke toner. Den fiolette er en klassisk **romgradient**; petroleumsgrønt virker kaldere og mer vitenskapelig; glør gir følelsen av en døende stjerne eller en science fiction-plakat.

- Fiolett stjernetåke: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Petroleumsgrønn stjernetåke: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Glødende stjernetåke: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Rosa kosmisk støv: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Spiralgalaksens kjerne: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Melkeveibånd: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Seks galaksegradienter. Spiralkjernen bruker en flat ellipse, og Melkeveibåndet er en lys stripe gjennom mørk himmel.

Vil du ha noe nærmere jorden, en himmel med stjerner og måne fremfor dypt rom, er kodene i [natthimmelgradienter](https://gradiently.design/nb/guide/night-sky-gradient) mildere. For gardiner av grønt og fiolett lys, se [nordlysgradienter](https://gradiently.design/nb/guide/aurora-gradients).

## Bygg en galaksebakgrunn i CSS, lag for lag

Én gradient gir en stjernetåke. En galakse oppstår når flere stables, noe CSS gjør godt siden `background-image` tar imot en liste. Det første laget i listen tegnes øverst.

1. **Legg grunnlaget** En bred radiell gradient fra tomromsindigo i midten til dypt rom langs kantene, så bildet aldri virker flatt.
2. **Legg til én hovedtåke** En farget radiell gradient som toner ut til `transparent`, plassert utenfor sentrum, omtrent der tredelslinjer møtes.
3. **Legg til en mindre sky** En annen fargetone langt fra den første, med lavere opasitet. Den gir dybde uten å kjempe om oppmerksomheten.
4. **Spre stjerner** Små radielle prikker som gjentas i to eller tre ulike størrelser, så gjentakelsene aldri danner et synlig rutenett.
5. **Avslutt med korn** Et svakt støylag over alt skjuler bånd i mørke områder og gir en fotografisk følelse.

```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%;
}
```

En komplett galakse i én regel. Siden stjerneflisene er 180, 260 og 420 piksler, gjentas mønsteret bare der alle tre sammenfaller, noe som skjer sjelden.

Radiell syntaks, inkludert størrelser som `ellipse 60% 25%` og stopp-posisjoner, dekkes i [radiell CSS-gradient](https://gradiently.design/nb/guide/css-radial-gradient). For kornlaget har [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture) en kopierbar metode med SVG-filter.

## Unngå grumsete galaksegradienter

Den vanligste feilen er en galakse som ligner et blåmerke: farger overlapper til brunt eller grått og er så jevnt fordelt at ingenting gløder. Glød trenger mørke rundt seg. Løsningen er nesten alltid mindre farge, plassert med mer omtanke. Fargelæren bak finnes i [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

### Ser grumsete ut

- Fiolett, petroleumsgrønt og oransje overlapper i midten
- Farge dekker hele bildet
- Nøytral grå eller helt svart grunnfarge
- Stjerner i et ryddig, synlig rutenett
- Glatt, ren digital flate med synlige bånd

### Ser ut som dypt rom

- Én hovedsky og én liten følgesky langt fra hverandre
- Farge på rundt en tredel av bildet, resten mørkt
- En grunnfarge med indigo- eller blåskjær
- Stjerner gjentatt i ulike størrelser
- Fint korn over alt

## Tekst på en galaksebakgrunn

Galaksebakgrunner passer til hvit eller svært lys skrift, helst på den mørke delen av bildet, ikke på den lyse tåkekjernen. Sett overskriften i det tomme rommet og la skyen ligge på den ene siden. Stjerner bak liten tekst er et reelt problem: de ligner feilplasserte punktum. Hold området bak brødteksten fritt for større stjerner, eller utelat stjerner helt der.

Et bredt design med mørk rombakgrunn, en glødende fargesky på den ene siden og ordene Lanseringskveld i hvitt

En kunngjøring av en sending i YouTube-miniatyrstørrelse. Ordene ligger i den mørke halvdelen; fargen på den andre siden.

Denne balansen håndterer Gradiently selv. En Mark vet hvor ordene dine er, flytter det roligste området med best kontrast bak dem og demper travle detaljer nær bokstavene. Da sluker aldri en kosmisk bakgrunn overskriften. Marks kan også ha rolig bevegelse, noe som passer en galakse bedre enn et stillbilde.

## Hvor galaksegradienter fungerer best

| Bruk | Størrelse | Tips |
| --- | --- | --- |
| Twitch-skjerm når du er frakoblet | 1920×1080 | Tåke på én side, sendetider på den mørke siden |
| YouTube-kanalbanner | 2560×1440 | Hold kjernen nær den trygge sonen i midten |
| Discord-serverbanner | 960×540 | Bare én sky; den vises liten |
| Mobilbakgrunn | 1080×1920 | Legg tåken lavt, unna klokken |
| Album- eller spillelisteomslag | 1080×1080 | En spiralkjerne i midten fungerer som symbol |
| Arrangementplakat | A4 ved 300 dpi, 2480×3508 | Trykk mørkner dype toner, så løft grunnfargen litt |

Galaksegradienter passer til spill, musikk, teknologi og alt som skjer om natten.

Spill og strømming er naturlige bruksområder, og [merkevarebygging for Twitch-strømmere](https://gradiently.design/nb/guide/twitch-streamer-branding) viser hvordan én stil følger paneler, bannere og overlegg. For flere mørke grunnfarger med glød, les [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds).

## FAQ

### Hvilke farger inngår i en galaksegradient?

En nesten svart grunnfarge som #03020a, en stjernetåkefarge som fiolett #6d28d9, magenta #c026d3 eller petroleumsgrønt #2dd4bf og en lys kjerne nær hvitt. Det meste av bildet forblir mørkt.

### Hvordan lager jeg en galaksebakgrunn i CSS?

Stable flere radielle gradienter i `background-image`: en mørk bunn, én eller to tåkeskyer som toner ut til transparent, og små prikker gjentatt med ulike `background-size`-verdier som stjerner.

### Hvorfor er romgradienten min grumsete?

Motsatte farger overlapper, og for mye av bildet er farget. Bruk én hovedsky, hold en annen fargetone langt unna og la den mørke bunnen dominere.

### Hvilken skriftfarge fungerer på en galaksebakgrunn?

Hvitt eller svært lyst lilla eller blått, plassert på den mørke delen av bildet fremfor over den lyse tåkekjernen.