Galakse gradient: kosmiske koder på det dybe rum

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.

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.

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 blidere. For gardiner af grønt og violet lys, se nordlys gradienter.

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

   Læg bunden

   En bred radial gradient fra tomrumsindigo i midten til dybt rum i kanterne, så billedet aldrig ser fladt ud.

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

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

Den radiale syntaks, herunder størrelser som ellipse 60% 25% og stoppositioner, gennemgås i CSS radial gradient. Til kornlaget har CSS-støjtekstur 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.

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.

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

Gaming og streaming er det naturlige match, og branding for Twitch-streamere 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.