# Gradiente galassia: codici cosmici su spazio profondo

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

Una galassia non è un colore, è profondità: un fondo scuro, nuvole di luce e punti bianchi sparsi. Ecco i codici e la stratificazione che la rendono credibile.

## The short version

- Un gradiente galassia si costruisce con un fondo quasi nero, una o due morbide nuvole di colore nebulosa e una spruzzata di piccole stelle.
- I gradienti radiali si adattano alle galassie meglio di quelli lineari, perché le nebulose brillano verso l’esterno da un centro luminoso.
- Gran parte di uno sfondo galassia deve restare scura, con il colore su circa un terzo dell’inquadratura.
- Mettere due colori di nebulosa lontani tra loro evita il grigio fangoso che compare dove si sovrappongono tinte opposte.
- I gradienti molto scuri formano facilmente bande, quindi uno sfondo galassia ha bisogno di un leggero strato di grana prima dell’export.

Un **gradiente galassia** è colore di nebulosa che brilla su un fondo quasi nero: nuvole viola, magenta, verde acqua o brace che sfumano nello spazio profondo, di solito con una spolverata di stelline in cima. Il segreto sono le proporzioni. Le vere fotografie dello spazio sono per lo più scure, e il colore vive in una o due nuvole, non su tutta l’inquadratura. Qui sotto trovi codici da copiare per le principali famiglie di nebulose e un cielo stellato completo a strati in CSS.

## Cosa fa sembrare un gradiente una galassia

Una sfumatura dal viola al blu è solo un gradiente viola. Comincia a sembrare spazio quando ha le quattro cose che l’occhio si aspetta dalle immagini astronomiche:

- **Un fondo quasi nero**, appena venato di blu o viola più che neutro.
- **Nuvole di nebulosa** che brillano da un nucleo luminoso e sfumano in modo irregolare: un lavoro per i gradienti radiali.
- **Un nucleo più luminoso** dentro la nuvola più brillante: un rosa pallido, lilla o crema quasi bianco.
- **Stelle**: tanti puntini bianchi e azzurro pallido, alcuni un po’ più grandi, sparsi senza uno schema.

- Spazio profondo: #03020a
- Indaco del vuoto: #1a1240
- Viola nebulosa: #6d28d9
- Magenta cosmico: #c026d3
- Verde acqua profondo: #0e7490
- Verde acqua ionico: #2dd4bf
- Brace: #fb923c
- Nucleo stellare: #fdf4e3

Una palette galassia. Scegli il fondo, una famiglia di nebulosa e il nucleo stellare. Usarli tutti insieme è il modo in cui lo spazio diventa un arcobaleno.

## Codici per gradienti galassia

Ognuno è un singolo gradiente radiale da incollare in uno strumento di design o in un foglio di stile. Sono volutamente sbilanciati verso il buio. Il viola è il classico **gradiente spazio**; il verde acqua è più freddo e scientifico; la brace sa di stella morente o di poster di fantascienza.

- Nebulosa viola: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Nebulosa verde acqua: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Nebulosa brace: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Polvere cosmica rosa: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Nucleo di galassia a spirale: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Fascia della Via Lattea: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Sei gradienti galassia. Il nucleo a spirale usa un’ellisse schiacciata e la fascia della Via Lattea è una striscia luminosa nel cielo scuro.

Se vuoi qualcosa di più vicino a casa, un cielo con stelle e luna invece dello spazio profondo, i codici del [gradiente cielo notturno](https://gradiently.design/it/guide/night-sky-gradient) sono più delicati. Per sipari di luce verde e viola, vedi [i gradienti aurora](https://gradiently.design/it/guide/aurora-gradients).

## Costruire uno sfondo galassia in CSS, strato dopo strato

Un solo gradiente ti dà una nebulosa. Una galassia nasce dal sovrapporne diversi, cosa che il CSS fa bene perché `background-image` accetta un elenco. Il primo strato indicato è dipinto sopra.

1. **Stendi il fondo** Un ampio gradiente radiale dall’indaco del vuoto al centro allo spazio profondo ai bordi, così l’inquadratura non appare mai piatta.
2. **Aggiungi una nebulosa principale** Un gradiente radiale colorato che sfuma in `transparent`, posto fuori centro, circa dove si incrocerebbe una linea dei terzi.
3. **Aggiungi una seconda nuvola, più piccola** Una tinta diversa, lontana dalla prima, con opacità più bassa. Aggiunge profondità senza contendersi l’attenzione.
4. **Spargi le stelle** Piccoli punti radiali ripetuti a due o tre misure diverse, così le ripetizioni non si allineano mai in una griglia visibile.
5. **Finisci con la grana** Un leggero strato di rumore su tutto nasconde le bande nelle zone scure e dà un aspetto fotografico.

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

Una galassia completa in una sola regola. Poiché le tessere di stelle sono di 180, 260 e 420 pixel, lo schema si ripete solo dove tutte e tre si allineano, cioè di rado.

La sintassi radiale, comprese misure come `ellipse 60% 25%` e posizioni dei punti d’arresto, è trattata in [gradiente radiale CSS](https://gradiently.design/it/guide/css-radial-gradient). Per lo strato di grana, la [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture) propone un filtro SVG da copiare.

## Evitare che un gradiente galassia diventi fangoso

L’errore più comune è una galassia che sembra un livido: colori che si sovrappongono in marrone o grigio e colore steso così uniformemente che nulla brilla. Il bagliore ha bisogno di buio attorno. La soluzione è quasi sempre meno colore, posto con più cura. La teoria del colore dietro è nei [gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients).

### Sembra fangoso

- Viola, verde acqua e arancione sovrapposti al centro
- Colore su tutta l’inquadratura
- Un fondo grigio neutro o nero puro
- Stelle in una griglia ordinata e visibile
- Superficie digitale liscia e pulita, con bande

### Sembra spazio profondo

- Una nuvola principale e una piccola compagna, lontane
- Colore su circa un terzo dell’inquadratura, il resto scuro
- Un fondo tinto di indaco o blu
- Stelle ripetute a misure irregolari
- Grana fine su tutto

## Mettere parole su uno sfondo galassia

Gli sfondi galassia accolgono testo bianco o molto chiaro, e lo accolgono meglio nella parte scura dell’inquadratura, non sul nucleo luminoso della nebulosa. Metti il titolo nello spazio vuoto e lascia la nuvola da un lato. Le stelle dietro il testo piccolo sono un vero problema: sembrano punti fermi sparsi. Tieni l’area dietro il corpo del testo libera dalle stelle più grandi, oppure togli del tutto le stelle da quella zona.

Un design largo con sfondo di spazio profondo, una nuvola luminosa di colore da un lato e le parole Notte di lancio in bianco

Un annuncio di streaming nel formato della miniatura YouTube. Le parole stanno nella metà scura; il colore vive dall’altra parte.

È il tipo di equilibrio che Gradiently gestisce da solo. Un Mark sa dove sono le tue parole, sposta dietro di esse la sua zona più calma e a miglior contrasto e attenua i dettagli affollati vicino alle lettere, così uno sfondo cosmico non inghiotte mai il titolo. I Mark possono anche portare un movimento lento, che a una galassia sta meglio di qualsiasi fotogramma fermo.

## Dove funzionano meglio i gradienti galassia

| Uso | Misura | Consiglio |
| --- | --- | --- |
| Schermata offline di Twitch | 1920×1080 | Nebulosa da un lato, programma sul lato scuro |
| Immagine del canale YouTube | 2560×1440 | Tieni il nucleo vicino all’area sicura centrale |
| Banner del server Discord | 960×540 | Una sola nuvola: viene mostrato piccolo |
| Sfondo per telefono | 1080×1920 | Metti la nebulosa in basso, lontano dall’orologio |
| Copertina di album o playlist | 1080×1080 | Un nucleo a spirale al centro funziona da simbolo |
| Poster di un evento | A4 a 300 dpi, 2480×3508 | La stampa scurisce i toni profondi, quindi alleggerisci un po’ il fondo |

I gradienti galassia sono a casa nei videogiochi, nella musica, nella tecnologia e in tutto ciò che accade di notte.

Videogiochi e streaming sono l’ambito naturale, e [l’identità di uno streamer Twitch](https://gradiently.design/it/guide/twitch-streamer-branding) mostra come mantenere un solo stile tra pannelli, banner e overlay. Per altri fondi scuri che brillano, leggi [gli sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds).

## FAQ

### Quali colori ha un gradiente galassia?

Un fondo quasi nero come #03020a, un colore di nebulosa come il viola #6d28d9, il magenta #c026d3 o il verde acqua #2dd4bf, e un nucleo pallido quasi bianco. Gran parte dell’inquadratura resta scura.

### Come si fa uno sfondo galassia in CSS?

Sovrapponi più gradienti radiali in `background-image`: un fondo scuro, una o due nuvole di nebulosa che sfumano in trasparente e piccoli punti ripetuti con diversi valori di `background-size` per le stelle.

### Perché il mio gradiente spazio sembra fangoso?

Perché colori opposti si sovrappongono e troppa parte dell’inquadratura è colorata. Usa una nuvola principale, tieni una seconda tinta lontana da essa e lascia dominare il fondo scuro.

### Che colore di testo funziona su uno sfondo galassia?

Bianco, o un lilla o azzurro molto pallido, posto sulla parte scura dell’inquadratura e non sul nucleo luminoso della nebulosa.