Stemningsfulde gradienter: mørke, rige koder med atmosfære

En stemningsfuld gradient er en mørk blanding, der opfører sig som et svagt oplyst rum: det meste af billedet ligger i skygge, ét område fanger lyset, og farverne holdes tilbage i stedet for at blive skruet op. Opskriften er enkel at beskrive. Start med en tonet næsten-sort, tilføj en eller to afdæmpede mellemtoner, og lad ét enkelt lys, ofte varmt mod en kølig bund, give overfladen liv. Nedenfor finder du tolv koder at kopiere, og derefter hvordan du bygger din egen og holder ord læsbare ovenpå.

Hvad gør en gradient stemningsfuld og ikke bare mørk

Mange mørke gradienter føles flade. Marineblå, der toner over i sort, er mørk, men der er intet vejr i den. Stemning kommer fra nogle få beslutninger, som fotografer og farvekorrigerere på film træffer af instinkt, og du kan træffe dem med vilje.

• Lav nøgle. Omkring tre fjerdedele af billedet er skygge. Lyset er undtagelsen, ikke reglen.
• Én lyskilde. Lyset kommer ind fra et hjørne eller en kant, så øjet ved, hvor vinduet eller lampen er.
• Tilbageholdt farve. Mellemtonerne er let grålige. En støvet petrol føles mere stemningsfuld end en klar.
• Farvede skygger. Det mørkeste punkt er blåsort, grønsort eller oksblod, aldrig #000000.
• Temperaturkontrast. Et lille varmt lys i en kølig scene, eller omvendt, skaber spænding.

Tolv stemningsfulde gradientkoder

Hver af dem er én CSS-værdi, du kan indsætte i background. De er groft grupperet efter temperatur: først de kølige og stormfulde, så de varme med lampelys, og til sidst nogle midt imellem.

Vil du have noget, der minder mere om en klar nat end en stormfuld, går nattehimmel-gradienter mere i blåt og tilføjer stjerner. Til dybere, mere blank farve med mere mætning ligger ædelstensfarver et trin lysere end noget her.

En stemningsfuld farvepalet at bygge ud fra

Når du laver din egen, så arbejd ud fra en palet frem for to farver. Fem er rigeligt: en bund, to skyggetrin, én afdæmpet mellemtone og ét lys. Lyset er den eneste farve, der må have reel lysstyrke, og den bør kun fylde et lille område.

Hvorfor varmt lys virker så godt mod kølig skygge, forklares i farvetemperatur. Flere færdige sæt finder du i mørke farvepaletter.

Sådan laver du en stemningsfuld gradient i CSS

1. 1

   Vælg en tonet bund

   Vælg en næsten-sort med en nuance i, som #0b0d12 til blåsort eller #120806 til varm brunsort. Brug den også som reserve i background-color.

2. 2

   Tilføj skyggekroppen

   Læg en blød lineær gradient mellem to mørke trin af samme nuance. Det giver billedet dybde, før noget lys kommer til.

3. 3

   Placér ét lys

   Tilføj en radial gradient i et hjørne, der toner ud til transparent ved omkring 40 procent. Hold farven afdæmpet og opaciteten et godt stykke under fuld.

4. 4

   Tilføj et køligt modlys

   Eventuelt en ekstra, større og svagere radial i det modsatte hjørne, i den kølige familie. Den forhindrer skyggesiden i at blive død.

5. 5

   Afslut med korn

   Et fint støjlag med lav opacitet skjuler banding og får overfladen til at føles som film. Kornede 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%);
}

Tekst på en stemningsfuld baggrund

Lys tekst på en mørk bund læses godt, indtil den krydser den ene lyse pøl, du har arbejdet så hårdt på. Planlæg overskriften til skyggesiden, og hold lyset væk fra ordene i stedet for bag dem. En blød offwhite, som #ece6dc, sidder mere naturligt på en stemningsfuld bund end ren hvid, der kan virke hård.

Versionen til højre er det, en Gradiently Mark gør af sig selv: den ved, hvor ordene er, gør farven dybere tæt på bogstaverne og vælger lys eller mørk tekst for hver linje ud fra sin egen palet, uden ekstra bokse eller skygger. Tekst på en gradient viser den manuelle version.

Hvor stemningsfulde gradienter fungerer bedst

De passer til nat, musik, drinks, film, parfume og stille luksus. De passer langt dårligere til en børnefødselsdag eller et sommerudsalg. Til en hel brugerflade i dette register dækker mørke gradientbaggrunde den ekstra omhu, skærme kræver.

Hvis du hellere vil slippe for at finjustere lag i hånden, har Markedet levende Marks i præcis dette register, som du kan søge frem med ord som »dyb petrol« eller »oksblod«. Du kan designe med enhver Mark, som ingen har sikret sig, gratis, og når du sikrer dig en, betyder det, at ingen andens plakat får den samme atmosfære.