Kortversionen
- En natthimmelsgradient är mörkast överst i bilden och ljusast nära horisonten, eftersom himlen rakt ovanför ligger längst från allt kvardröjande ljus.
- Riktiga natthimlar är sällan helt svarta: de ligger mellan djup marinblå, indigo och blågrått, med ett varmare eller grönare band vid horisonten.
- Stjärnor kan ritas i CSS med små radiella gradienter lagda över himlen, var och en upprepad i olika rutstorlek så att mönstret aldrig ser ut som ett rutnät.
- En måne läses bäst som en liten, ljus radiell gradient med ett brett, svagt avtagande ut i det omgivande blå.
- Mörkblå gradienter får lätt bandning, så lägg till lätt korn och exportera PNG eller högkvalitativ video i stället för hårt komprimerad JPEG.
På den här sidan
En natthimmelsgradient är en vertikal blandning som börjar nästan svart överst och lyfter till ett mjukare blått nära horisonten, ofta med ett svagt varmt eller blågrönt band längst ner. Den riktningen spelar roll: det som är rakt ovanför är den mörkaste delen av varje natthimmel, och horisonten bär fortfarande lite spritt ljus från städer, den nedgående solen eller månen. Får du ordningen rätt läses till och med två färger som natt. Lägg till en måne, några stjärnor och lite korn, så läses det som en plats.
Färgerna i en riktig natthimmel
Titta på fotografier av himlen efter mörkrets inbrott så hittar du mycket lite äkta svart. Zeniten är en djup marinblå med en antydan till violett. Himlens mitt är indigo eller skiffergrått. Horisonten tar upp det ljus som finns: orange från gatlyktor, lila i den blå timmen, en svag grön ton under norrskenet på höga breddgrader. Att välja dessa som separata färgstopp är det som skiljer en natthimmel från en generisk marinblå gradient.
Koder för natthimmelsgradienter
Var och en av dessa går uppifrån och ner i 180 grader, så den mörkaste färgen hamnar överst i bilden. Kopiera en som den är, eller byt horisontens färgstopp för att ändra timme och miljö.
Lägg märke till att färgstoppen inte ligger med jämna mellanrum. Det mesta av bilden förblir mörkt, och färgskiftet sker i den nedersta femtedelen, precis som en riktig horisont beter sig. Jämna avstånd får himlen att se ut som en ramp i stället för en kupol. Resonemanget bakom ojämna färgstopp finns i färgstopp i gradienter.
Så lägger du till en måne
En måne är en radiell gradient i tre delar: en liten skiva av nästan vitt, ett snabbt fall till ljusblått och en lång, svag gloria som tonar ut i himlen. Håll skivan liten, ungefär 3 till 5 procent av bildens bredd. En stor, mjuk måne läses som en strålkastare. Placera den ur centrum, högt i ett hörn, så att den aldrig konkurrerar med din rubrik.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)För att kombinera en måne med ett horisontsken, lägg den radiella gradienten ovanpå en linjär. Guiden om radiell gradient förklarar positioner och storlekar mer ingående.
Så ritar du stjärnor i CSS
Stjärnor är små radiella gradienter: en hård vit prick som slutar en bråkdel av en pixel senare. Ge varje stjärnlager sin egen background-size så att det upprepas i olika takt. Rutor på 200, 230, 290 och 170 pixlar upprepas ur takt, så ögat hittar aldrig rutnätet. Variera också opaciteten: riktiga stjärnor är inte lika ljusstarka.
.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 för natthimmelsgradienter
Natthimlar passar sena evenemang, lanseringar, sömn- och välmåendevarumärken, astronomiklubbar, musikutgivningar och allt som händer efter mörkrets inbrott. Den mörka övre halvan är ett naturligt hem för ljus text, och den ljusare horisonten ger ögat ett golv. Sätt din rubrik i övre mitten och håll månen borta från den. Om orden korsar horisontbandet, kontrollera att de fortfarande läses: text på gradient tar upp kontrastreglerna.
Ett Instagram-inlägg i 1080×1350, med orden högt upp i den mörka delen av himlen.
En story i 1080×1920 för ett sömnvarumärke. Den högre bilden lämnar mer himmel ovanför orden.
Storlek
Vart ljuset tar vägen
Storlek
Vart ljuset tar vägen
Storlek
Vart ljuset tar vägen
Storlek
Vart ljuset tar vägen
Storlek
Vart ljuset tar vägen
Så stoppar du bandning i en mörkblå gradient
Mörkblått är där bandning i gradienter syns mest, eftersom skärmar har få urskiljbara steg mellan nästan svarta toner. Sprid de mörkaste färgstoppen över ett större avstånd, lägg till ett fint brusskikt med mycket låg opacitet och undvik hård JPEG-komprimering. För djupare mörka paletter i allmänhet har mörka gradientbakgrunder fler recept, och galaxgradienter för samma himmel mot violett och magenta.
Vill du slippa handbygga korn, ljus och läsbarhet är Gradiently Marks levande bakgrunder som renderas i varje storlek du designar i och lugnar sig själva bakom dina ord. Sök i Marknaden på färgord som ”midnatt” eller ”djup marinblå” och designa gratis med vilken oclaimad Mark som helst.
Vanliga frågor
Vilka färger ger en natthimmelsgradient?
Börja med en nästan svart marinblå som #020611 överst, gå via #0b1a3a och #1e3a6e och avsluta med ett ljusare blått som #3b5b8f vid horisonten. Lägg till ett varmt eller lila färgstopp allra längst ner för stadsljus eller den blå timmen.
Åt vilket håll ska en natthimmelsgradient gå?
Uppifrån och ner i 180 grader, mörkast överst. Himlen rakt ovanför är alltid mörkare än horisonten på natten.
Hur lägger jag till stjärnor i en CSS-gradient?
Lägg flera små radial-gradient()-prickar över himlen och ge varje lager en egen background-size, så att upprepningarna hamnar ur takt och aldrig ser ut som ett rutnät.
Varför visar min mörkblå gradient ränder?
Det är bandning: för få färgsteg över en stor mörk yta. Lägg till lite korn, sprid de mörka färgstoppen längre isär och exportera PNG i stället för en komprimerad JPEG.
Fungerar en natthimmelsgradient bakom text?
Ja, ljus text läses bra mot den mörka övre himlen. Håll rubriken borta från månen och det ljusa horisontbandet.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil