Gradiente galassia: codici cosmici su spazio profondo

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.

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.

Se vuoi qualcosa di più vicino a casa, un cielo con stelle e luna invece dello spazio profondo, i codici del gradiente cielo notturno sono più delicati. Per sipari di luce verde e viola, vedi i gradienti aurora.

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. 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. 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. 3

   Aggiungi una seconda nuvola, più piccola

   Una tinta diversa, lontana dalla prima, con opacità più bassa. Aggiunge profondità senza contendersi l’attenzione.

4. 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. 5

   Finisci con la grana

   Un leggero strato di rumore su tutto nasconde le bande nelle zone scure e dà un aspetto fotografico.

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

La sintassi radiale, comprese misure come ellipse 60% 25% e posizioni dei punti d’arresto, è trattata in gradiente radiale CSS. Per lo strato di grana, la texture di rumore in CSS 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.

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.

È 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

Videogiochi e streaming sono l’ambito naturale, e l’identità di uno streamer Twitch mostra come mantenere un solo stile tra pannelli, banner e overlay. Per altri fondi scuri che brillano, leggi gli sfondi a gradiente scuro.