# Svarta gradienter: så designar du med nästan svart

[Canonical HTML page](https://gradiently.design/sv/guide/black-gradient)

Rent svart är ett hål i skärmen. De svarta gradienter som känns exklusiva är byggda av nästan-svarta toner med lite färg i, och ett ljus som rör sig.

## The short version

- En svart gradient är en övergång mellan nästan-svarta toner, eller från svart till en färg, som ger mörka designer djup i stället för en platt tomhet.
- De bästa svarta gradienterna undviker rent #000000 och använder nyanserade svarta toner med lite färgton i, som blåsvart, varm espresso eller auberginesvart.
- Mörka gradienter får lätt ränder, eftersom det finns få ljushetsnivåer mellan nästan-svarta värden, så de behöver oftast korn eller ett bredare omfång.
- Brödtext på en svart gradient läses bäst i en mjuk off-white, och grå sekundärtext behöver fortfarande minst 4,5:1 i kontrast.
- Svarta gradienter passar lanseringar, lyx, musik, nattliv och produkter i mörkt läge, där det mörka fältet får en accentfärg att lysa.

En **svart gradient** är en övergång mellan nästan-svarta toner, eller från svart till en färg, så att en mörk design får djup och ljus i stället för en platt tomhet. De som ser exklusiva ut använder nästan aldrig rent `#000000`. De utgår från ett nyanserat svart, som `#0b0b10`, låter ljusheten variera med bara några procent och lägger till en enda källa till färg eller ljus någonstans i ytan.

Den här guiden ger dig nyanserade svarta toner, svarta gradientkoder att kopiera, lösningen på de ränder som plågar mörka övergångar och regler för text. För mörka bakgrunder i allmänhet, se [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds), och för grunderna i hur övergångar fungerar, börja med [vad en gradient är](https://gradiently.design/sv/guide/what-is-a-gradient).

## Därför ser rent svart platt ut

`#000000` har ingen färgton och ingenstans mörkare att gå, så en design byggd på det har inga skuggor, bara frånvaro. Ingenting i verkligheten är så svart: ett mörkt rum, en natthimmel och svart tyg har alla en antydan till färg och en långsam förändring i ljushet. Ögat läser den förändringen som djup.

- Rent svart: inget djup: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Nyanserat nästan-svart: djup: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Sida vid sida ser den nyanserade versionen ut som en yta där ljus faller in. Det rena svarta ser ut som ett hål.

Det finns också en praktisk orsak. På OLED-skärmar stängs rent svarta pixlar av helt, och på vissa telefoner tar det en stund att slå på dem igen, vilket kan ge en kort utsmetning när mörkt innehåll rullar. Om du lyfter ditt mörkaste värde några steg över noll slipper du det, och det kostar dig ingenting visuellt.

## Nyanserade svarta toner: färgerna inuti ett bra svart

Ett nyanserat svart är en mycket mörk färg med lite mättnad kvar. Håll ljusheten mellan ungefär 4 % och 9 % i HSL och låt mättnaden ligga någonstans mellan 15 % och 40 %. Färgtonen avgör stämningen: blåsvart känns tekniskt och kyligt, varma bruna toner känns som läder och kaffe, och aubergine känns som kväll.

- Bläck: #0b0b10
- Marinsvart: #0a0e17
- Skogssvart: #0b120f
- Auberginesvart: #120b14
- Espresso: #14100d
- Grafit: #161618

Sex nyanserade svarta toner. Var för sig ser de nästan likadana ut, men bredvid varandra och bredvid färg framträder deras temperatur.

Om du arbetar i OKLCH är siffrorna lättare att resonera kring: ljushet runt 15 till 20 % och kroma mellan 0,005 och 0,025. Bläck ovan är `oklch(15.2% 0.011 285)`, ett svart med en viskning av blått. Vår guide till [färgkoder](https://gradiently.design/sv/guide/color-codes-explained) förklarar hur du läser de här värdena.

## Svarta gradientkoder att kopiera

Var och en av dessa håller sitt mörkaste värde över rent svart och ändrar ljusheten försiktigt. Använd dem som hela bakgrunder, hero-sektioner eller presentationsunderlag, och välj den vars temperatur passar din accentfärg.

- Bläckfall: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Blåsvart strålkastare: `radial-gradient(120% 80% at 50% 0%, #1b2233 0%, #0a0e17 60%, #050608 100%)`
- Varm espresso: `linear-gradient(180deg, #221b16 0%, #14100d 55%, #0a0806 100%)`
- Grafitglans: `linear-gradient(135deg, #0e0e10 0%, #2a2a2e 50%, #0e0e10 100%)`
- Svart till violett: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- Svart till glöd: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Svart och guld: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Midnattsturkos: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Åtta svarta gradienter, alla att kopiera. De fyra första ligger nära neutralt, de fyra sista låter en färg stiga ur mörkret.

Riktning betyder mer på svart än någon annanstans, eftersom det händer så lite annat. Ljus som faller uppifrån känns naturligt och lugnt. Ljus som stiger från ett nedre hörn känns som en glöd, som en skärm eller en låga, och drar blicken till just det hörnet. Mer om detta finns i [gradientvinklar](https://gradiently.design/sv/guide/gradient-angle).

## Gradienter från svart till färg

De mest slående svarta gradienterna låter en enda färg stiga fram ur mörkret. Två regler håller dem rika. För det första: ge färgen högst en tredjedel av ytan, så att svart förblir huvudtonen. För det andra: mörkna färgen mot svart längs sin egen färgton i stället för att tona genom grått. Violett ska passera djup indigo på vägen ner, inte kolgrått. En grå mitt är den vanligaste orsaken till [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients).

Violett glöd ur svart: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

Violetten passerar djup ametist och plommon på väg mot svart, så att avtoningen förblir färgad i stället för grå.

Moderna webbläsare kan göra en del av jobbet åt dig. Att interpolera i OKLCH håller färgens kroma vid liv genom de mörkare stoppen, och en enkel reservrad täcker äldre webbläsare.

```css
.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}
```

Den andra deklarationen gäller där `in oklch` stöds och ignoreras på andra ställen.

## Så slipper du ränder i mörka gradienter

Skärmar visar oftast 256 nivåer per färgkanal. En gradient från `#0a0a0a` till `#1a1a1a` har bara 16 av dessa nivåer att arbeta med, så över en hero på 1 920 pixlars bredd blir varje steg ungefär 120 pixlar brett, och du ser ränder. Det kallas [gradientränder](https://gradiently.design/sv/guide/gradient-banding), och mörka gradienter drabbas mest.

### Ger ränder

- Ett långt, mycket smalt ljushetsomfång, som #0a0a0a till #1a1a1a
- Helt neutrala gråtoner, där alla tre kanaler stegar vid samma punkt
- Att exportera en mörk gradient som komprimerad JPEG
- Att sträcka en liten gradientbild över en stor skärm

### Löser det

- Ett lätt lager korn eller brus över gradienten
- En aning färgton, så att röd, grön och blå kanal stegar vid olika punkter
- Att exportera i full storlek som PNG, eller rendera gradienten live i CSS
- Ett bredare ljushetsomfång, eller ett kortare avstånd för övergången

Korn är den mest pålitliga lösningen, eftersom det bryter upp varje stegs hårda kant till en textur som ögat blandar ihop igen. Några procents opacitet räcker. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) går på djupet med uttrycket, och det här är den minimala CSS-koden.

```css
.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Ett SVG-brusskikt med 8 % opacitet döljer stegen i en mörk gradient utan att se smutsigt ut.

## Text och färg på en svart gradient

På svart underlag klarar nästan all ljus text kontrastkraven, så risken flyttas till din sekundärtext. Mellangrått som ser bra ut på en ljus skärm kan hamna under minimikravet på 4,5:1 för brödtext. Rent vitt har också ett pris: vissa läsare tycker att skarpt vitt på nästan-svart blir hårt i långa stycken, så en varm off-white är vänligare och läses ändå tydligt. Se [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) för alla regler.

| Textfärg | Kontrast mot #0b0b10 | Använd den till |
| --- | --- | --- |
| `#ffffff` vit | 19,6:1 | Korta rubriker |
| `#f2efe9` varm off-white | 17,1:1 | Rubriker och brödtext |
| `#a1a1aa` ljusgrå | 7,7:1 | Sekundärtext |
| `#8a8a93` mellangrå | 5,7:1 | Bildtexter och etiketter |
| `#6b6b75` mattgrå | 3,7:1 | Bara stor text, 24 px och uppåt |
| `#4a4a52` kolgrå | 2,2:1 | Dekoration, aldrig ord |

Kontrastvärden beräknade med WCAG-formeln mot Bläck-svart. Allt under 4,5:1 är för svagt för vanlig brödtext.

Ett stående inlägg med orden Efter mörkrets inbrott i off-white på en djup, mjukt belyst nästan-svart gradient

Ett nästan-svart fält, en varm off-white rad och en enda accent: den klassiska layouten för en svart gradient.

## Där svarta gradienter fungerar bäst

- **Lanseringar och avslöjanden**, där ett mörkt fält får en produkt eller rubrik att kännas belyst
- **Lyx, parfym och smycken**, ihop med en metallaccent som `#c9a96e`
- **Musik, nattliv och evenemang**, med en mättad färg som stiger från ett hörn
- **Tekniska produkter och utvecklarverktyg**, där blåsvart känns exakt
- **Gränssnitt i mörkt läge**, med två eller tre nyanserade svarta toner som ytlager
- **Fotoportföljer**, där en stilla svart ram låter bilderna bära färgen

I Gradiently låter Marknaden dig söka bland Marks med färgord som ”nästan svart” eller ”svart och guld”, och varje Mark har redan korn och ljus, så problemen med ränder och platthet ovan är avklarade innan du börjar.

## FAQ

### Vilken hexkod är bäst för en svart gradient?

Utgå från ett nyanserat nästan-svart som `#0b0b10` (blåsvart) eller `#14100d` (varm espresso) i stället för `#000000`, och låt det ljusaste stoppet ligga några steg högre, till exempel `#1c1c24`.

### Varför har min svarta gradient ränder?

Nästan-svarta värden har mycket få ljushetsnivåer emellan sig, så varje steg blir ett synligt band. Lägg på ett lätt lager korn, ge de svarta tonerna en aning färgton eller bredda ljushetsomfånget.

### Vilken textfärg ser bäst ut på en svart gradient?

En varm off-white som `#f2efe9` är skarp att läsa och känns mjukare än rent vitt. Håll grå sekundärtext på minst 4,5:1 i kontrast.

### Hur gör jag en gradient från svart till en färg som inte blir grumlig?

Mörkna färgen längs sin egen färgton på väg mot svart, till exempel violett via djup indigo, i stället för att tona genom grått. Att interpolera i OKLCH i CSS hjälper.

### Passar en svart gradient för mörkt läge?

Ja, om den är subtil. Ytor i mörkt läge fungerar bäst som två eller tre nyanserade svarta toner några procent från varandra, med synliga gradienter begränsade till stora bakgrundsytor.