# Galaxgradient: kosmiska koder på djup rymd

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

En galax är ingen färg, den är djup: en mörk botten, moln av ljus och vita punkter strödda genom den. Här är koderna och lagren som gör den övertygande.

## The short version

- En galaxgradient byggs av en nästan svart botten, ett eller två mjuka moln av nebulosafärg och en strösslad skur av små stjärnor.
- Radiella gradienter passar galaxer bättre än linjära, eftersom nebulosor glöder utåt från en ljus mitt.
- Det mesta av en galaxbakgrund ska förbli mörkt, med färg på kanske en tredjedel av bildrutan.
- Att placera två nebulosafärger långt från varandra undviker den geggiga gråa tonen som uppstår där motsatta nyanser överlappar.
- Mycket mörka gradienter får lätt bandning, så en galaxbakgrund behöver ett lätt kornlager före export.

En **galaxgradient** är mjuk nebulosafärg som glöder ur en nästan svart botten: violetta, magenta, turkosa eller glödfärgade moln som tonar ut i djup rymd, oftast med ett stoftlager av små stjärnor ovanpå. Hemligheten är proportionen. Verkliga foton av rymden är mest mörka, och färgen finns i ett eller två moln snarare än över hela bildrutan. Nedan finns kopierbara koder för de viktigaste nebulosafamiljerna och en komplett lagrad stjärnhimmel i CSS.

## Vad som får en gradient att se ut som en galax

En blandning från lila till blått är bara en lila gradient. Den börjar läsas som rymd när den har de fyra saker ögat väntar sig av astronomibilder:

- **En botten som är nästan svart**, lätt tonad i blått eller violett snarare än neutral.
- **Nebulosamoln** som glöder från en ljus kärna och tonar ut ojämnt, vilket är ett jobb för radiella gradienter.
- **En ljusare kärna** inuti det ljusaste molnet: ett blekrosa, lila eller kräm nära vitt.
- **Stjärnor**: många små punkter av vitt och blekblått, några något större, strödda utan mönster.

- Djup rymd: #03020a
- Tomrumsindigo: #1a1240
- Nebulosaviolett: #6d28d9
- Kosmisk magenta: #c026d3
- Djup turkos: #0e7490
- Jonturkos: #2dd4bf
- Glöd: #fb923c
- Stjärnkärna: #fdf4e3

En galaxpalett. Välj botten, en nebulosafamilj och stjärnkärnan. Att använda varje färg på en gång är hur rymd blir en regnbåge.

## Koder för galaxgradienter

Var och en av dessa är en enda radiell gradient du kan klistra in i ett designverktyg eller en stilmall. De är med avsikt tyngda mot den mörka änden. Den violetta är den klassiska **rymdgradienten**. Turkos känns kallare och mer vetenskaplig. Glödfärgad känns som en döende stjärna eller en science fiction-affisch.

- Violett nebulosa: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Turkos nebulosa: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Glödande nebulosa: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Rosa kosmiskt stoft: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Spiralgalaxens kärna: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Vintergatans band: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Sex galaxgradienter. Spiralkärnan använder en tillplattad ellips, och Vintergatans band är en ljus rand genom mörk himmel.

Vill du ha något närmare hemma, en himmel med stjärnor och en måne i stället för djup rymd, är koderna för [nattstjärnhimmel-gradient](https://gradiently.design/sv/guide/night-sky-gradient) mildare. För draperier av grönt och violett ljus, se [norrskensgradienter](https://gradiently.design/sv/guide/aurora-gradients).

## Bygg en galaxbakgrund i CSS, lager för lager

En enda gradient ger dig en nebulosa. En galax kommer av att stapla flera, vilket CSS gör bra eftersom `background-image` tar en lista. Det första lagret i listan målas överst.

1. **Lägg botten** En bred radiell gradient från tomrumsindigo i mitten till djup rymd vid kanterna, så att bildrutan aldrig ser platt ut.
2. **Lägg till en huvudnebulosa** En färgad radiell gradient som tonar ut till `transparent`, placerad utanför mitten, ungefär där en tredjedelslinje skulle korsa.
3. **Lägg till ett andra, mindre moln** En annan nyans, långt från den första, med lägre opacitet. Det ger djup utan att slåss om uppmärksamheten.
4. **Strö ut stjärnor** Små radiella punkter kakelplacerade i två eller tre olika storlekar, så att upprepningarna aldrig linjerar upp sig till ett synligt rutnät.
5. **Avsluta med korn** Ett svagt brusskikt över allt döljer bandning i de mörka områdena och får det att kännas fotografiskt.

```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 galax i en regel. Eftersom stjärnrutorna är 180, 260 och 420 pixlar upprepas mönstret bara där alla tre linjerar, vilket sällan sker.

Den radiella syntaxen, inklusive storlekar som `ellipse 60% 25%` och stoppositioner, tas upp i [CSS radiell gradient](https://gradiently.design/sv/guide/css-radial-gradient). För kornlagret har [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture) ett kopierbart SVG-filterupplägg.

## Så hindrar du en galaxgradient från att bli geggig

Det vanligaste misslyckandet är en galax som ser ut som ett blåmärke: färger som överlappar till brunt eller grått, och färg så jämnt utsmetad att ingenting glöder. Glöd behöver mörker runt sig. Lösningen är nästan alltid mindre färg, placerad mer noggrant. Färgteorin bakom finns i [geggiga gradienter](https://gradiently.design/sv/guide/muddy-gradients).

### Ser geggigt ut

- Violett, turkos och orange som alla överlappar i mitten
- Färg som täcker hela bildrutan
- En neutralgrå eller helt svart botten
- Stjärnor i ett prydligt, synligt rutnät
- En slät, ren digital yta med bandning

### Ser ut som djup rymd

- Ett huvudmoln och ett litet följeslagarmoln, långt från varandra
- Färg på ungefär en tredjedel av bildrutan, resten mörkt
- En botten tonad i indigo eller blått
- Stjärnor kakelplacerade i ojämna storlekar
- Fint korn över allt

## Lägga ord på en galaxbakgrund

Galaxbakgrunder passar vit eller mycket blek text, och passar den bäst på den mörka delen av bildrutan, inte över den ljusa nebulosakärnan. Sätt rubriken i det tomma utrymmet och låt molnet ligga åt ena sidan. Stjärnor bakom liten text är ett verkligt problem: de ser ut som förlupna punkter. Håll ytan bakom brödtext fri från de större stjärnorna, eller lämna stjärnorna borta från den regionen helt.

En bred design med en djuprymdsbakgrund, ett glödande färgmoln åt ena sidan och orden Lanseringskväll i vitt

Ett sändningsmeddelande i YouTube-miniatyrstorlek. Orden ligger i den mörka halvan. Färgen finns på andra sidan.

Det här är den sortens balans Gradiently klarar av själv. En Mark vet var dina ord finns, flyttar sitt lugnaste, mest kontrastrika område bakom dem och dämpar röriga detaljer nära bokstäverna, så att en kosmisk bakgrund aldrig sväljer rubriken. Marks kan också bära långsam rörelse, vilket passar en galax bättre än någon stillbild.

## Där galaxgradienter fungerar bäst

| Användning | Storlek | Tips |
| --- | --- | --- |
| Twitch-skärm för offline | 1920×1080 | Nebulosa på ena sidan, schema på den mörka sidan |
| Kanalbild för YouTube | 2560×1440 | Håll kärnan nära den säkra ytan i mitten |
| Banner för Discord-server | 960×540 | Bara ett moln. Den visas liten |
| Telefonbakgrund | 1080×1920 | Lägg nebulosan lågt, borta från klockan |
| Album- eller spellisteomslag | 1080×1080 | En spiralkärna i mitten fungerar som symbol |
| Evenemangsaffisch | A4 i 300 dpi, 2480×3508 | Tryck mörknar djupa toner, så lyft botten lite |

Galaxgradienter är hemma i spel, musik, teknik och allt som händer på natten.

Spel och streaming är den naturliga passformen, och [varumärke för Twitch-streamare](https://gradiently.design/sv/guide/twitch-streamer-branding) visar hur du håller en stil över paneler, banners och överlägg. För fler mörka bottnar som glöder, läs [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds).

## FAQ

### Vilka färger ingår i en galaxgradient?

En nästan svart botten som #03020a, en nebulosafärg som violett #6d28d9, magenta #c026d3 eller turkos #2dd4bf, och en blek kärna nära vitt. Det mesta av bildrutan förblir mörkt.

### Hur gör jag en galaxbakgrund i CSS?

Stapla flera radiella gradienter i `background-image`: en mörk botten, ett eller två nebulosamoln som tonar ut till transparent och små punkter kakelplacerade med olika `background-size`-värden för stjärnor.

### Varför ser min rymdgradient geggig ut?

Motsatta färger överlappar och för mycket av bildrutan är färgat. Använd ett huvudmoln, håll en andra nyans långt från det och låt den mörka botten dominera.

### Vilken textfärg fungerar på en galaxbakgrund?

Vitt eller ett mycket blekt lila eller blått, placerat på den mörka delen av bildrutan snarare än över den ljusa nebulosakärnan.