# Galakse gradient: kosmiske koder på det dybe rum

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

En galakse er ikke en farve, den er dybde: en mørk bund, skyer af lys og hvide prikker spredt imellem. Her er koderne og lagdelingen, der gør den overbevisende.

## The short version

- En galakse gradient bygges af en næsten sort bund, én eller to bløde skyer af stjernetågefarve og et drys af små stjerner.
- Radiale gradienter passer bedre til galakser end lineære, fordi stjernetåger gløder udad fra et klart centrum.
- Det meste af en galaksebaggrund bør forblive mørkt, med farve på måske en tredjedel af billedet.
- Når to tågefarver placeres langt fra hinanden, undgår du den mudrede grå, der opstår, hvor modsatte farver overlapper.
- Meget mørke gradienter får let banding, så en galaksebaggrund har brug for et let kornlag før eksport.

En **galakse gradient** er blød stjernetågefarve, der gløder ud af en næsten sort bund: violette, magenta, petrol eller glødende skyer, der toner ud i det dybe rum, som regel med et drys af bittesmå stjerner ovenpå. Hemmeligheden er proportioner. Rigtige fotos af rummet er for det meste mørke, og farven bor i én eller to skyer frem for over hele billedet. Nedenfor finder du koder til kopiering for de vigtigste familier af stjernetåger og en komplet stjernehimmel i lag i CSS.

## Hvad der får en gradient til at ligne en galakse

En overgang fra lilla til blå er bare en lilla gradient. Den begynder at ligne rummet, når den har de fire ting, dit øje forventer fra astronomiske billeder:

- **En bund, der er næsten sort**, let tonet mod blå eller violet frem for neutral.
- **Skyer af stjernetåge**, der gløder fra en klar kerne og toner ujævnt ud, hvilket er en opgave for radiale gradienter.
- **En klarere kerne** inde i den klareste sky: en bleg rosa, lilla eller cremefarvet næsten hvid.
- **Stjerner**: mange bittesmå punkter af hvid og lyseblå, nogle få lidt større, spredt uden mønster.

- Dybt rum: #03020a
- Tomrumsindigo: #1a1240
- Tågeviolet: #6d28d9
- Kosmisk magenta: #c026d3
- Dyb petrol: #0e7490
- Ionpetrol: #2dd4bf
- Glød: #fb923c
- Stjernekerne: #fdf4e3

En galaksepalet. Vælg bunden, én familie af stjernetåger og stjernekernen. Bruger du alle farver på én gang, bliver rummet til en regnbue.

## Koder til galakse gradienter

Hver af disse er en enkelt radial gradient, som du kan indsætte i et designværktøj eller et stylesheet. De er bevidst vægtet mod den mørke ende. Den violette er den klassiske **rum gradient**; petrol føles koldere og mere videnskabelig; glød føles som en døende stjerne eller en sci-fi-plakat.

- Violet stjernetåge: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Petrol stjernetåge: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Glødende stjernetåge: `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 kerne: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Mælkevejens bånd: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Seks galakse gradienter. Spiralkernen bruger en fladtrykt ellipse, og Mælkevejens bånd er en klar stribe gennem en mørk himmel.

Vil du have noget tættere på jorden, en himmel med stjerner og en måne frem for det dybe rum, er koderne til [nattehimmel gradient](https://gradiently.design/da/guide/night-sky-gradient) blidere. For gardiner af grønt og violet lys, se [nordlys gradienter](https://gradiently.design/da/guide/aurora-gradients).

## Byg en galaksebaggrund i CSS, lag for lag

En enkelt gradient giver dig en stjernetåge. En galakse opstår ved at stable flere, og det klarer CSS godt, fordi `background-image` tager imod en liste. Det første lag i listen bliver malet øverst.

1. **Læg bunden** En bred radial gradient fra tomrumsindigo i midten til dybt rum i kanterne, så billedet aldrig ser fladt ud.
2. **Tilføj én hovedtåge** En farvet radial gradient, der toner ud til `transparent`, placeret uden for midten, cirka hvor en tredjedelslinje ville krydse.
3. **Tilføj en anden, mindre sky** En anden farvetone, langt fra den første, med lavere opacitet. Den giver dybde uden at kæmpe om opmærksomheden.
4. **Strø stjerner ud** Bittesmå radiale prikker gentaget i to eller tre forskellige størrelser, så gentagelserne aldrig stiller sig op i et synligt gitter.
5. **Afslut med korn** Et svagt støjlag over det hele skjuler banding i de mørke områder og får det til at føles fotografisk.

```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 komplet galakse i én regel. Fordi stjernefliserne er 180, 260 og 420 pixels, gentager deres mønster sig kun, hvor alle tre flugter, og det sker sjældent.

Den radiale syntaks, herunder størrelser som `ellipse 60% 25%` og stoppositioner, gennemgås i [CSS radial gradient](https://gradiently.design/da/guide/css-radial-gradient). Til kornlaget har [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture) en SVG-filtermetode, du kan kopiere.

## Sådan undgår du, at en galakse gradient bliver mudret

Den mest almindelige fejl er en galakse, der ligner et blåt mærke: farver, der overlapper til brun eller grå, og farve spredt så jævnt, at intet gløder. Glød kræver mørke omkring sig. Løsningen er næsten altid mindre farve, placeret mere omhyggeligt. Farveteorien bag står i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients).

### Ser mudret ud

- Violet, petrol og orange, der alle overlapper i midten
- Farve over hele billedet
- En neutral grå eller ren sort bund
- Stjerner i et pænt, synligt gitter
- Glat, ren digital overflade med banding

### Ligner det dybe rum

- Én hovedsky og én lille ledsager, langt fra hinanden
- Farve på cirka en tredjedel af billedet, resten mørkt
- En bund tonet mod indigo eller blå
- Stjerner gentaget i ujævne størrelser
- Fint korn over det hele

## Tekst på en galaksebaggrund

Galaksebaggrunde passer til hvid eller meget bleg skrift, og bedst på den mørke del af billedet, ikke på stjernetågens klare kerne. Sæt overskriften i det tomme rum, og lad skyen ligge til den ene side. Stjerner bag lille tekst er et reelt problem: de ligner vildfarne punktummer. Hold området bag brødteksten fri for de større stjerner, eller drop stjernerne helt i det område.

Et bredt design med en baggrund af dybt rum, en glødende farvesky til den ene side og ordet Lanceringsaften i hvidt

En annoncering af en stream i YouTube-thumbnailstørrelse. Ordene står i den mørke halvdel; farven bor på den anden side.

Det er den slags balance, Gradiently klarer af sig selv. En Mark ved, hvor dine ord står, flytter sit roligste område med bedst kontrast ind bag dem og dæmper travle detaljer nær bogstaverne, så en kosmisk baggrund aldrig sluger overskriften. Marks kan også have langsom bevægelse, som passer bedre til en galakse end noget stillbillede.

## Hvor galakse gradienter fungerer bedst

| Brug | Størrelse | Tip |
| --- | --- | --- |
| Offlineskærm på Twitch | 1920×1080 | Stjernetåge på den ene side, program på den mørke side |
| YouTube-kanalbanner | 2560×1440 | Hold kernen nær det centrale sikre område |
| Discord-serverbanner | 960×540 | Kun én sky; det vises småt |
| Baggrund til telefonen | 1080×1920 | Placér stjernetågen lavt, fri af uret |
| Album- eller playlistecover | 1080×1080 | En spiralkerne i midten fungerer som symbol |
| Eventplakat | A4 ved 300 dpi, 2480×3508 | Tryk gør dybe toner mørkere, så løft bunden lidt |

Galakse gradienter er hjemme i gaming, musik, tech og alt, der sker om natten.

Gaming og streaming er det naturlige match, og [branding for Twitch-streamere](https://gradiently.design/da/guide/twitch-streamer-branding) viser, hvordan du holder ét udtryk på tværs af paneler, bannere og overlays. For flere mørke bunde, der gløder, så læs [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds).

## FAQ

### Hvilke farver er der i en galakse gradient?

En næsten sort bund som #03020a, en tågefarve som violet #6d28d9, magenta #c026d3 eller petrol #2dd4bf og en bleg kerne tæt på hvid. Det meste af billedet forbliver mørkt.

### Hvordan laver jeg en galaksebaggrund i CSS?

Stabl flere radiale gradienter i `background-image`: en mørk bund, én eller to tågeskyer, der toner ud til gennemsigtig, og bittesmå prikker gentaget med forskellige `background-size`-værdier som stjerner.

### Hvorfor ser min rum gradient mudret ud?

Modsatte farver overlapper, og for meget af billedet er farvet. Brug én hovedsky, hold en anden farvetone langt fra den, og lad den mørke bund dominere.

### Hvilken skriftfarve fungerer på en galaksebaggrund?

Hvid eller en meget bleg lilla eller blå, placeret på den mørke del af billedet frem for over stjernetågens klare kerne.