Stämningsfulla gradienter: mörka, rika koder med atmosfär

En stämningsfull gradient är en mörk gradient som beter sig som ett svagt upplyst rum: det mesta av bilden ligger i skugga, en yta fångar ljuset och färgerna hålls tillbaka i stället för att skruvas upp. Receptet är enkelt att säga. Utgå från ett nyanserat nästan svart, lägg till en eller två dämpade mellantoner och låt ett enda ljus, ofta varmt mot en sval botten, väcka ytan till liv. Nedan finns tolv koder att kopiera, sedan hur du bygger din egen och håller orden läsbara ovanpå.

Vad som gör en gradient stämningsfull, inte bara mörk

Många mörka gradienter känns platta. Marinblått som tonar mot svart är mörkt, men det har inget väder i sig. Stämning kommer av några beslut som fotografer och filmkolorister fattar på instinkt, och som du kan fatta med avsikt.

• Lågnyckel. Ungefär tre fjärdedelar av bilden är skugga. Ljuset är undantaget, inte regeln.
• En källa. Ljuset kommer in från ett hörn eller en kant, så ögat vet var fönstret eller lampan finns.
• Återhållen färg. Mellantonerna är lätt gråtonade. Ett dammigt blågrönt känns mer stämningsfullt än ett klart.
• Färgade skuggor. Den mörkaste punkten är blåsvart, grönsvart eller oxblod, aldrig #000000.
• Temperaturkontrast. Ett litet varmt ljus i en sval scen, eller tvärtom, skapar spänning.

Tolv koder för stämningsfulla gradienter

Var och en av dessa är ett enda CSS-värde som du kan klistra in i background. De är löst grupperade efter temperatur: svala och stormiga först, sedan de varma, lampbelysta, sedan några däremellan.

Vill du ha något närmare en klar natt än en stormig lutar gradienter med nattsky mer åt blått och lägger till stjärnor. För djupare, glansigare färg med mer mättnad ligger juveltoner ett steg ljusare än något här.

En stämningsfull färgpalett att bygga från

När du gör din egen, utgå från en palett snarare än två färger. Fem räcker gott: en botten, två skuggsteg, en dämpad mellanton och ett ljus. Ljuset är den enda färg som får ha verklig ljusstyrka, och det ska synas på en liten yta.

Skälet till att varmt ljus fungerar så bra mot sval skugga förklaras i färgtemperatur. Fler färdiga uppsättningar finns i mörka färgpaletter.

Så gör du en stämningsfull gradient i CSS

1. 1

   Sätt en nyanserad botten

   Välj ett nästan svart med en kulör i, som #0b0d12 för blåsvart eller #120806 för varmt brunsvart. Använd det som reserv i background-color också.

2. 2

   Lägg till skuggkroppen

   Lägg en mild linjär gradient mellan två mörka steg av samma kulör. Det ger bilden djup innan något ljus kommer in.

3. 3

   Placera ett ljus

   Lägg till en radiell gradient i ett hörn som tonar ut till transparent vid ungefär 40 procent. Håll dess färg dämpad och dess opacitet långt under full.

4. 4

   Lägg till ett svalt motljus

   Eventuellt en andra, större och svagare radiell i motsatt hörn, i den svala familjen. Den hindrar skuggsidan från att dö.

5. 5

   Avsluta med korn

   Ett fint brusskikt med låg opacitet döljer bandning och får ytan att kännas som film. Korniga gradienter har koden.

.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}

Text på en stämningsfull bakgrund

Ljus text på mörk botten läses bra, tills den korsar den enda ljusa pöl du arbetat så hårt på. Planera rubriken för skuggsidan och håll ljuset borta från orden i stället för bakom dem. Ett mjukt off-white, som #ece6dc, sitter bekvämare på en stämningsfull botten än rent vitt, som kan se hårt ut.

Den högra versionen är vad en Gradiently-Mark gör på egen hand: den vet var orden finns, fördjupar färgen nära bokstäverna och väljer ljus eller mörk text per rad ur sin egen palett, utan att lägga till rutor eller skuggor. Text på en gradient tar upp den manuella versionen.

Där stämningsfulla gradienter fungerar bäst

De passar natt, musik, dryck, film, parfym och stilla lyx. De passar ett barnkalas eller en sommarrea mycket sämre. För ett helt gränssnitt i det här registret tar mörka gradientbakgrunder upp den extra omsorg som skärmar kräver.

Vill du slippa finjustera lager för hand har Marknaden levande Marks i precis det här registret, som går att söka med ord som ”djupt blågrönt” eller ”oxblod”. Du kan designa med vilken ledig Mark som helst gratis, och när du säkrar en betyder det att ingen annans affisch bär samma atmosfär.