Mörka gradientbakgrunder: djup utan dysterhet

En bra mörk gradientbakgrund är ett färgtonat nästan svart med en färg som glöder ur det, som om en enda lampa var tänd i ett mörkt rum. Tonen ger det svarta djup, den upplysta färgen ger ögat något att följa och den stora mörka ytan får vit text att se skarp ut. Utan de tre sakerna ser en mörk gradient bara ut som en dämpad skärm.

Börja med ett färgtonat nästan svart

Rent svart, #000000, är en återvändsgränd: det finns inget att blanda från, och varje färg bredvid ser påklistrad ut. Ett nästan svart med en aning nyans ger gradienten en familj att höra till. Blåsvart känns kyligt och tekniskt, violettsvart känns lyxigt, grönsvart känns naturligt och varma bruna toner känns som läder och trä. Välj den ton som passar färgen du tänker lysa upp.

Lägg till en upplyst färg

Den upplysta färgen är det som gör mörker till atmosfär. Placera den vid sidan om mitten, oftast nära en kant eller ett hörn, så att den läses som en ljuskälla. Håll den i samma familj som tonen: violett ljus på violettsvart, turkos på blåsvart. En färg räcker nästan alltid. Två kan fungera om de är grannar. Fler än så börjar likna en nattklubb, vilket är fint om du designar för en sådan. Se neongradienter.

Därför ser vissa mörka gradienter dystra ut

Det vanligaste misstaget är att blanda den upplysta färgen mot grått på vägen mot svart. Håll kromat uppe medan den mörknar: violett ska bli djupare violett, sedan violettsvart, aldrig grått. Att blanda i OKLCH hjälper, och leriga gradienter förklarar varför.

Band: den mörka gradientens största risk

Mörka gradienter spänner över bara ett litet värdeomfång, ofta ett dussin eller två per kanal, och människor är mycket känsliga för små steg mellan mörka toner. En slät mörk toning över en hel skärm är därför ett perfekt recept på synliga ränder. Tre vanor förebygger det: ge toningen tillräckligt omfång, lägg på fint korn och exportera utan kraftig komprimering. Detaljerna finns i gradientband och korniga gradienter.

Text på en mörk gradient

Mörka bakgrunder är generösa mot text, men bara i de mörka områdena. Håll orden borta från den upplysta färgen, där kontrasten sjunker. Använd off-white i stället för rent vitt för längre stycken, eftersom rent vitt på nästan svart kan kännas bländande. Och mät: WCAG kräver minst 4,5:1 för brödtext och 3:1 för stor text, vilket du kan kontrollera med WebAIM:s kontrastverktyg.

Där mörka gradientbakgrunder fungerar bäst

Mörka gradienter passar allt som händer på natten, känns exklusivt eller behöver färg som glöder: musik och evenemang, film och spel, tekniklanseringar, parfym och sprit, och portföljer där arbetet ska vara det ljusaste på sidan. De hjälper också produktfotografi, eftersom ett upplyst föremål på mörk botten ser värdefullt ut.

• Omslag och affischer: en mörk botten gör en enda ljus titel till hjälten
• Stories och Reels: mörka helskärmsbilder känns filmiska på en telefon
• Presentationer: ljus text på mörkt är lugnare i ett dunkelt rum än mörk text på vitt
• Webbplatsers hero-ytor: en mörk hero får första skärmen att kännas genomtänkt. Se bakgrunder för webbplatsers hero

De passar sämre där människor läser länge på papper, eller där ett varumärke bygger på dagsljus, friskhet eller lekfullhet. Där gör en ljus botten med en mjuk färg samma jobb.

En mörk gradientbakgrund i CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

Om du designar ett helt gränssnitt i mörkt läge i stället för en enda bakgrund, se design för mörkt läge. Många Marks på Marknaden är byggda på mörk botten, och de gör plats för dina ord automatiskt genom att flytta sitt lugnaste område bakom texten.