Himmelgradienter: koder til daggry, middag, skumring og nat

En himmelgradient går fra en dybere farve over dig til en lysere ved horisonten, fordi det er sådan, dagslys opfører sig: lyset nær horisonten passerer gennem mere luft, spredes mere og glider mod hvid. Får du den ene retning rigtig, ligner næsten enhver blå himmel. Nedenfor er koder til kopiering til seks tidspunkter på dagen, fra første lys til en måneløs nat, med noter om, hvor hver virker, og hvilken skriftfarve der passer på den.

Sådan er den rigtige himmel bygget op

Kig op på en klar dag, og den blå lige over dig er fyldigere end den blå nær tagene. Ved solopgang og solnedgang krydser solens lys så meget atmosfære, at det meste af det blå spredes væk, før det når dig, så røde, orange og lyserøde toner bliver lavt på himlen, mens zenit forbliver kølig. Det giver dig to regler for enhver himmelgradient: dyb foroven, lys forneden og varme farver kun nær horisonten.

Gradientkoder til daggry og solopgang

Daggry er dagens blødeste himmel. Toppen er stadig natteindigo, midten bliver lilla, og et bånd af rosa og fersken ligger på horisonten. Den føles stille og håbefuld, og derfor passer den til wellnessbrands, morgenrutiner, annonceringer af noget nyt og alt, der vil føles blidt frem for højlydt.

Gradienter til klar middag og dagshimmel

En klar middagshimmel er den klassiske himmelblå gradient: mættet blå foroven, der toner ud til en lys, næsten hvid blå ved horisonten. Hold farvetonen stabil, og lad lysheden gøre arbejdet. Bliver det nederste stop gråt frem for lyseblåt, begynder himlen at se forurenet ud. En diset eftermiddag er den samme idé med mindre mætning, og en overskyet dag bytter blå ud med en kølig grå.

For flere blå toner ud over himlen, fra marineblå til is, se koderne til blå gradienter. Vil du også have vandet under himlen, går artiklen om havgradienter den anden vej: lys foroven, dyb forneden.

Koder til gyldne time, skumring og blå time

Aftenhimlen er der, hvor himmelgradienter bliver dramatiske. Den gyldne time beholder en dagsblå over dig og en kraftig rav ved horisonten, og det bløde grålige bånd mellem dem er ægte, så kæmp ikke imod det. Skumringen sænker det blå til marine og tilføjer magenta og koral. Den blå time, den korte stund efter at solen er gået ned, er næsten helt blå og en af de mest flatterende mørke baggrunde, der findes.

Hælder dit design helt mod orange og lyserød uden noget blåt, har du bevæget dig fra himmel til solnedgang, og koderne til solnedgangsgradienter vil tjene dig bedre.

Gradientkoder til nattehimlen

En nattehimmel er sjældent helt sort. Byer, månen og atmosfærens svage glød holder horisonten en anelse lysere end zenit. Byg en natgradient med en næsten sort top og en dyb marineblå horisont, så ligner den himmel; vend den om, og den ligner et hul. For stjerner, måneskin og mange flere mørkeblå toner, læs guiden om gradienter til nattehimlen.

Hvilken himmel passer til hvilket design

Det sidste punkt betyder mere på himle end på de fleste gradienter, da en himmel per definition går fra mørk til lys. Placér ordene der, hvor himlen er roligst, og vælg skriftfarve til det område, ikke til gradienten som helhed. Tekst på en gradient går mere i dybden. I Gradiently klares det for dig: en Mark holder sit roligste område bag ordene, og Automatisk farve vælger lys eller mørk skrift linje for linje ud fra din Marks egen palet.

Himmelgradienter til alle formater

Høje formater passer perfekt til himle: en story eller en pin kan vise hele stigningen fra horisont til zenit. Brede formater klemmer den, så hold horisontfarverne i den nederste tredjedel, og lad den øvre himmel fylde resten. Det er en ny opstilling til hver størrelse, og derfor mister man som regel horisonten, når ét billede beskæres til flere formater.

En himmelgradient i CSS til alle tider af døgnet

På en hjemmeside er tre custom properties nok til at beskrive enhver himmel. Skift én klasse, og hele sektionen skifter tidspunkt, hvilket er praktisk til et heltebillede, der følger den besøgendes lokale tid, eller en side, der bliver mørkere, efterhånden som en historie skrider frem.

.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }

For vinkler, placering af stop og reserveløsninger, se lineær gradient i CSS.