# Mörka gradientbakgrunder: djup utan dysterhet [Canonical HTML page](https://gradiently.design/sv/guide/dark-gradient-backgrounds) Mörka gradienter kan se ut som en exklusiv nattscen eller som en lerig skärm med ljusstyrkan nedskruvad. Skillnaden är en handfull val, alla lätta att kopiera. ## The short version - En rik mörk gradientbakgrund utgår från ett färgtonat nästan svart i stället för rent svart och lägger sedan till en upplyst färg som stiger ur det. - Mörka gradienter ser dystra ut när de saknar ljuskälla, saknar färg i det svarta och saknar kontrast mellan de mörka och upplysta delarna. - Mörka gradienter får mer band än någon annan sort, så de behöver nästan alltid ett fint korn och noggrann export. - Ljus text på en mörk gradient ska ligga i det mörkaste området och nå minst kontrastkvoten 4,5:1 för brödtext. - Off-white text och lätt lyft svart är skonsammare för ögonen än rent vitt på rent svart. 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. - Blåsvart: #0b0f1a - Violettsvart: #120b1a - Grönsvart: #0a1411 - Umbrasvart: #160c0a - Neutralt svart: #0f0f10 Fem nästan svarta toner. Bredvid varandra syns nyanserna tydligt, var för sig läses de som svart med en stämning. ## 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](https://gradiently.design/sv/guide/neon-gradients). - Violett lampa: `radial-gradient(circle at 80% 20%, #6d28d9 0%, #2e1065 30%, #0c0a1d 70%)` - Turkos horisont: `linear-gradient(180deg, #030712 0%, #042f2e 65%, #0f766e 100%)` - Glödande kol: `radial-gradient(ellipse at 50% 110%, #ea580c 0%, #7c2d12 30%, #1c0a05 65%, #0c0605 100%)` - Blå timmen: `linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)` - Rosa rök: `radial-gradient(circle at 20% 80%, #be185d 0%, #4a044e 35%, #0f0710 75%)` - Mossnatt: `linear-gradient(135deg, #050a07 0%, #0f2419 55%, #166534 100%)` Sex mörka gradienter, var och en ett färgtonat nästan svart med en upplyst färg. Det mesta av varje ruta förblir mörkt. ## Därför ser vissa mörka gradienter dystra ut ### Dystert - Rent svart som blandas mot mörkgrått - Ljus som är jämnt spritt, utan källa - Den upplysta färgen är dämpad mot grått - Synliga ränder över den mörka toningen - Grå text på grå-svart botten ### Rikt - Ett färgtonat nästan svart med tydlig nyans - Ett ljus vid sidan om mitten som tonar ut - Den upplysta färgen är mättad i sin ljusaste punkt - Fint korn över hela ytan - Off-white text i det mörkaste området 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](https://gradiently.design/sv/guide/muddy-gradients) 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](https://gradiently.design/sv/guide/gradient-banding) och [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients). > **Kolla på en telefon** Band som är osynliga på en kalibrerad skärm kan vara tydliga på en telefon med full ljusstyrka, efter att en social plattform har komprimerat om bilden. Kontrollera alltid den uppladdade versionen. ## 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](https://webaim.org/resources/contrastchecker/). | Textfärg | På `#0b0f1a` | Använd till | | --- | --- | --- | | `#ffffff` vitt | Cirka 19:1 | Rubriker och korta etiketter | | `#e5e7eb` off-white | Cirka 15:1, mjukare | Brödtext och långläsning | | `#9ca3af` mellangrått | Cirka 7,5:1, klarar AA | Bildtexter och sekundär text | | `#4b5563` mörkgrått | Cirka 2,5:1, underkänt | Undvik för allt som folk måste kunna läsa | Textfärger på blåsvart botten. Kontrollera alltid kontrasten i den ljusaste punkten bakom orden, inte den mörkaste. Ett kvadratiskt omslag med titeln Efter midnatt där ett starkt sken ligger bakom orden Ljuset går rakt bakom titeln och plattar ut den. Samma kvadratiska omslag med den mörkare delen av gradienten bakom titeln Med den mörka botten bakom titeln ramar ljuset i stället in den. ## 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](https://gradiently.design/sv/guide/website-hero-background) 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 ```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; } ``` En blåsvart botten med ett blått ljus uppe till höger, off-white brödtext och vita rubriker. Lägg på ett kornlager för att avsluta. 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](https://gradiently.design/sv/guide/dark-mode-design). 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. ## FAQ ### Hur får jag en mörk gradientbakgrund att se bra ut? Använd ett färgtonat nästan svart i stället för rent svart, lägg till en upplyst färg från samma familj vid sidan om mitten och avsluta med ett fint korn. ### Varför har min mörka gradient ränder? Mörka övergångar spänner över mycket få färgvärden, så stegen är breda och lätta att se. Lägg på korn, bredda omfånget och exportera i hög kvalitet. ### Vilken textfärg fungerar på en mörk gradient? Vitt för rubriker och off-white som `#e5e7eb` för brödtext, placerad i det mörkaste området. Kontrollera minst 4,5:1 kontrast för brödtext. ### Ska jag använda rent svart i en gradient? Sällan. Ett nästan svart med en lätt nyans blandar mer naturligt och ger gradienten djup. ### Vilka färger passar till en svart gradient? Djup violett, turkos, blått, glödorange och rosa fungerar alla som en enda upplyst färg på nästan svart botten i samma nyansfamilj.