Galaksegradient: kosmiske fargekoder i mørkt rom

En galaksegradient er myk stjernetåkefarge som gløder fra en nesten svart bunn: fiolette, magenta, petroleumsgrønne eller glødende skyer som toner ut i dypt verdensrom, gjerne med et dryss små stjerner over. Hemmeligheten er forholdet mellom lys og mørke. Ekte romfoto er stort sett mørke, og fargen ligger i én eller to skyer fremfor over hele bildet. Nedenfor finner du kopierbare koder for de viktigste stjernetåkefamiliene og et komplett stjernefelt i CSS.

Hva som får en gradient til å ligne en galakse

En blanding fra lilla til blått er bare en lilla gradient. Den begynner å ligne verdensrommet når den har de fire tingene øyet forventer fra astronomibilder:

• En nesten svart grunnfarge, med et svakt blått eller fiolett skjær fremfor en nøytral tone.
• Stjernetåkeskyer som gløder fra en lys kjerne og toner ujevnt ut, noe radielle gradienter passer til.
• En lysere kjerne inni den lyseste skyen: blek rosa, lys lilla eller krem nær hvitt.
• Stjerner: mange små punkter i hvitt og lyseblått, noen litt større, spredt uten mønster.

Koder til galaksegradienter

Hver av disse er én radiell gradient du kan lime inn i et designverktøy eller stilark. De har bevisst overvekt av mørke toner. Den fiolette er en klassisk romgradient; petroleumsgrønt virker kaldere og mer vitenskapelig; glør gir følelsen av en døende stjerne eller en science fiction-plakat.

Vil du ha noe nærmere jorden, en himmel med stjerner og måne fremfor dypt rom, er kodene i natthimmelgradienter mildere. For gardiner av grønt og fiolett lys, se nordlysgradienter.

Bygg en galaksebakgrunn i CSS, lag for lag

Én gradient gir en stjernetåke. En galakse oppstår når flere stables, noe CSS gjør godt siden background-image tar imot en liste. Det første laget i listen tegnes øverst.

1. 1

   Legg grunnlaget

   En bred radiell gradient fra tomromsindigo i midten til dypt rom langs kantene, så bildet aldri virker flatt.

2. 2

   Legg til én hovedtåke

   En farget radiell gradient som toner ut til transparent, plassert utenfor sentrum, omtrent der tredelslinjer møtes.

3. 3

   Legg til en mindre sky

   En annen fargetone langt fra den første, med lavere opasitet. Den gir dybde uten å kjempe om oppmerksomheten.

4. 4

   Spre stjerner

   Små radielle prikker som gjentas i to eller tre ulike størrelser, så gjentakelsene aldri danner et synlig rutenett.

5. 5

   Avslutt med korn

   Et svakt støylag over alt skjuler bånd i mørke områder og gir en fotografisk følelse.

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

Radiell syntaks, inkludert størrelser som ellipse 60% 25% og stopp-posisjoner, dekkes i radiell CSS-gradient. For kornlaget har støytekstur i CSS en kopierbar metode med SVG-filter.

Unngå grumsete galaksegradienter

Den vanligste feilen er en galakse som ligner et blåmerke: farger overlapper til brunt eller grått og er så jevnt fordelt at ingenting gløder. Glød trenger mørke rundt seg. Løsningen er nesten alltid mindre farge, plassert med mer omtanke. Fargelæren bak finnes i grumsete gradienter.

Tekst på en galaksebakgrunn

Galaksebakgrunner passer til hvit eller svært lys skrift, helst på den mørke delen av bildet, ikke på den lyse tåkekjernen. Sett overskriften i det tomme rommet og la skyen ligge på den ene siden. Stjerner bak liten tekst er et reelt problem: de ligner feilplasserte punktum. Hold området bak brødteksten fritt for større stjerner, eller utelat stjerner helt der.

Denne balansen håndterer Gradiently selv. En Mark vet hvor ordene dine er, flytter det roligste området med best kontrast bak dem og demper travle detaljer nær bokstavene. Da sluker aldri en kosmisk bakgrunn overskriften. Marks kan også ha rolig bevegelse, noe som passer en galakse bedre enn et stillbilde.

Hvor galaksegradienter fungerer best

Spill og strømming er naturlige bruksområder, og merkevarebygging for Twitch-strømmere viser hvordan én stil følger paneler, bannere og overlegg. For flere mørke grunnfarger med glød, les mørke gradientbakgrunner.