Nattehimmel-gradienter: dypblått, stjerner og måneskinn i kode

En nattehimmel-gradient er en vertikal overgang som starter nesten svart øverst og løfter seg til en mykere blå nær horisonten, ofte med et svakt varmt eller blågrønt bånd helt nederst. Retningen betyr noe: rett over oss er den mørkeste delen av enhver nattehimmel, og horisonten holder fortsatt litt spredt lys fra byer, solen som har gått ned eller månen. Får du den rekkefølgen riktig, leses selv to farger som natt. Legg til en måne, noen stjerner og litt korn, så leses det som et sted.

Fargene i en ekte nattehimmel

Ser du på fotografier av himmelen etter mørkets frembrudd, finner du svært lite ekte svart. Senit er en dyp marineblå med et hint av fiolett. Midten av himmelen er indigo eller skifergrå. Horisonten fanger opp det lyset som finnes: oransje fra gatelys, lilla i den blå timen, et svakt grønt under nordlyset på høye breddegrader. Å velge disse som separate fargestopp er det som skiller en nattehimmel fra en generisk marineblå gradient.

Koder for nattehimmel-gradienter

Alle disse går fra topp til bunn i 180 grader, så den mørkeste fargen ligger øverst i bildet. Kopier en som den er, eller bytt horisontstoppet for å endre tidspunkt og sted.

Legg merke til at stoppene ikke er jevnt fordelt. Mesteparten av bildet forblir mørkt, og fargeendringen skjer i den nederste femtedelen, slik en ekte horisont oppfører seg. Jevn fordeling får himmelen til å se ut som en rampe i stedet for en kuppel. For tanken bak ujevne stopp, se fargestopp i gradienter.

Slik legger du til en måne

En måne er en radial gradient med tre deler: en liten skive i nesten hvitt, et raskt fall til lyseblått og en lang, svak glorie som tones ut i himmelen. Hold skiven liten, rundt 3 til 5 prosent av bildets bredde. En stor, myk måne leses som et lyskasterlys. Plasser den utenfor midten, høyt i et hjørne, så den aldri konkurrerer med overskriften din.

For å kombinere en måne med et horisontlys legger du den radiale gradienten over en lineær. Guiden om radial gradient forklarer posisjoner og størrelser mer i dybden.

Slik tegner du stjerner i CSS

Stjerner er bittesmå radiale gradienter: en skarp hvit prikk som stopper en brøkdel av en piksel senere. Gi hvert stjernelag sin egen background-size så det gjentas i ulikt tempo. Fliser på 200, 230, 290 og 170 piksler gjentas i utakt, så øyet aldri finner rutenettet. Varier også opasiteten: ekte stjerner er ikke like sterke alle sammen.

.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}

Designideer med nattehimmel-gradient

Nattehimler passer til sene arrangementer, lanseringer, merkevarer innen søvn og velvære, astronomiklubber, musikkutgivelser og alt som skjer etter mørkets frembrudd. Den mørke øvre halvdelen er et naturlig hjem for lys tekst, og den lysere horisonten gir øyet et gulv. Sett overskriften i den øvre midten og hold månen unna den. Krysser ordene horisontbåndet, sjekk at de fortsatt kan leses: tekst på gradient dekker kontrastreglene.

Slik unngår du banding i en mørkeblå gradient

Mørkeblått er der banding i gradienter synes best, fordi skjermer har få tydelige trinn mellom de nesten svarte tonene. Spre de mørkeste stoppene over en lengre avstand, legg på et fint støylag med svært lav opasitet, og unngå hard JPEG-komprimering. For mørke paletter generelt har mørke gradientbakgrunner flere oppskrifter, og galaksegradienter presser den samme himmelen mot fiolett og magenta.

Vil du heller slippe å bygge korn, lys og lesbarhet for hånd, er Marks i Gradiently levende bakgrunner som gjengis i alle størrelser du designer i, og som roer seg bak ordene dine. Søk i Markedet etter fargeord som «midnatt» eller «dyp marineblå», og design gratis med en hvilken som helst Mark som ingen har sikret seg.