Kort fortalt
- En nattehimmel-gradient er mørkest øverst i billedet og lysest nær horisonten, fordi himlen lige over os er længst væk fra det lys, der stadig hænger ved.
- Rigtige nattehimle er sjældent ren sort: de ligger mellem dyb marineblå, indigo og blågrå, med et varmere eller grønnere bånd ved horisonten.
- Stjerner kan tegnes i CSS med bittesmå radiale gradienter lagt over himlen, hver gentaget i en forskellig flisestørrelse, så mønstret aldrig ligner et gitter.
- En måne fungerer bedst som en lille, lys radial gradient med en bred, svag udtoning ud i den omgivende blå.
- Mørkeblå gradienter får nemt banding, så tilføj let korn, og eksportér PNG eller video i høj kvalitet frem for hårdt komprimeret JPEG.
På denne side
En nattehimmel-gradient er en lodret blanding, der starter næsten sort øverst og løfter sig til en blødere blå nær horisonten, ofte med et svagt varmt eller petrolfarvet bånd helt nederst. Retningen betyder noget: lige over os er den mørkeste del af enhver nattehimmel, og horisonten holder stadig lidt spredt lys fra byer, den nedgående sol eller månen. Får du den rækkefølge rigtig, virker selv to farver som nat. Tilføj en måne, nogle få stjerner og lidt korn, så virker den som et sted.
Farverne på en rigtig nattehimmel
Ser du på fotografier af himlen efter mørkets frembrud, finder du meget lidt ægte sort. Zenit er en dyb marineblå med et strejf af violet. Midten af himlen er indigo eller skifer. Horisonten opfanger det lys, der er omkring: orange fra gadelygter, syren i den blå time, et svagt grønt under nordlyset på høje breddegrader. At vælge dem som separate stop er det, der adskiller en nattehimmel fra en generisk marineblå gradient.
Koder til nattehimmel-gradienter
Hver af dem går fra top til bund i 180 grader, så den mørkeste farve sidder øverst i billedet. Kopiér en, som den er, eller skift horisontstoppet ud for at ændre tidspunkt og sted.
Læg mærke til, at stoppene ikke har lige stor afstand. Det meste af billedet forbliver mørkt, og farveskiftet sker i den nederste femtedel, sådan som en rigtig horisont opfører sig. Jævn afstand får himlen til at ligne en rampe i stedet for en kuppel. Tankerne bag ujævne stop finder du i farvestop i gradienter.
Sådan tilføjer du en måne
En måne er en radial gradient med tre dele: en lille skive af næsten hvid, et hurtigt fald til lyseblå og en lang, svag glorie, der toner ud i himlen. Hold skiven lille, omkring 3 til 5 procent af billedets bredde. En stor, blød måne virker som en projektør. Placér den uden for midten, højt i et hjørne, så den aldrig konkurrerer med din overskrift.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)Vil du kombinere en måne med et skær ved horisonten, så læg den radiale gradient oven på en lineær. Guiden om radiale gradienter forklarer placeringer og størrelser mere i dybden.
Sådan tegner du stjerner i CSS
Stjerner er bittesmå radiale gradienter: en skarp hvid prik, der stopper en brøkdel af en pixel senere. Giv hvert stjernelag sin egen background-size, så det gentages i et forskelligt tempo. Fliser på 200, 230, 290 og 170 pixels gentages ude af takt, så øjet aldrig finder gitteret. Varier også opaciteten: rigtige stjerner har ikke alle samme lysstyrke.
.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%;
}Designidéer med nattehimmel-gradienter
Nattehimle passer til sene arrangementer, lanceringer, brands inden for søvn og wellness, astronomiklubber, musikudgivelser og alt, der foregår efter mørkets frembrud. Den mørke øverste halvdel er et naturligt sted for lys tekst, og den lysere horisont giver øjet et gulv. Sæt din overskrift i den øvre midte, og hold månen væk fra den. Krydser ordene horisontbåndet, så tjek, at de stadig kan læses: tekst på en gradient gennemgår kontrastreglerne.
Et Instagram-opslag i 1080×1350 med ordene højt oppe i den mørke del af himlen.
En story i 1080×1920 til et søvnbrand. Det højere format giver mere himmel over ordene.
Størrelse
Hvor lyset skal sidde
Størrelse
Hvor lyset skal sidde
Størrelse
Hvor lyset skal sidde
Størrelse
Hvor lyset skal sidde
Hvor lyset skal sidde
Sådan undgår du banding i en mørkeblå gradient
Mørkeblå er der, hvor banding i gradienter er mest synligt, fordi skærme har få tydelige trin mellem næsten-sorte. Spred de mørkeste stop over en længere afstand, tilføj et fint støjlag med meget lav opacitet, og undgå hård JPEG-komprimering. Til mørke paletter generelt har mørke gradientbaggrunde flere opskrifter, og galaksegradienter skubber den samme himmel ud i violet og magenta.
Vil du hellere slippe for selv at bygge korn, lys og læsbarhed, er Marks i Gradiently levende baggrunde, der gengives i alle de størrelser, du designer i, og falder til ro bag dine ord. Søg i Markedet efter farveord som »midnat« eller »dyb marineblå«, og design gratis med enhver Mark, som ingen har sikret sig.
Spørgsmål, folk stiller
Hvilke farver giver en nattehimmel-gradient?
Start med en næsten sort marineblå som #020611 øverst, gå gennem #0b1a3a og #1e3a6e, og slut med en lysere blå som #3b5b8f ved horisonten. Tilføj et varmt eller syrenfarvet stop helt nederst for bylys eller den blå time.
Hvilken retning skal en nattehimmel-gradient gå?
Fra top til bund i 180 grader, mørkest øverst. Himlen lige over os er altid mørkere end horisonten om natten.
Hvordan tilføjer jeg stjerner til en CSS-gradient?
Læg flere bittesmå radial-gradient()-prikker over himlen, og giv hvert lag en forskellig background-size, så gentagelserne kommer ud af takt og aldrig ligner et gitter.
Hvorfor har min mørkeblå gradient striber?
Det er banding: for få farvetrin over en stor mørk flade. Tilføj lidt korn, spred de mørke stop længere fra hinanden, og eksportér PNG i stedet for en komprimeret JPEG.
Er en nattehimmel-gradient god bag tekst?
Ja, lys tekst læses godt på den mørke øvre himmel. Hold overskriften væk fra månen og det lyse horisontbånd.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil