# Sorte gradienter: sådan designer du med næsten sort

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

Ren sort er et hul i skærmen. De sorte gradienter, der føles dyre, er bygget af næsten-sorte toner med lidt farve i sig og et lys, der bevæger sig.

## The short version

- En sort gradient er en overgang mellem næsten-sorte toner, eller fra sort over i en farve, som giver mørke designs dybde i stedet for en flad tomhed.
- De bedste sorte gradienter undgår ren #000000 og bruger nuancerede sorte toner med et strejf af farve, for eksempel blåsort, varm espresso eller auberginesort.
- Mørke gradienter får let striber, fordi der er få lysstyrketrin mellem næsten-sorte værdier, så de har som regel brug for korn eller et bredere spænd.
- Brødtekst på en sort gradient læses bedst i en blød off-white, og grå sekundær tekst skal stadig have et kontrastforhold på mindst 4,5:1.
- Sorte gradienter passer til lanceringer, luksus, musik, natteliv og produkter med mørk tilstand, hvor det mørke felt får én accentfarve til at gløde.

En **sort gradient** er en overgang mellem næsten-sorte toner, eller fra sort over i en farve, så et mørkt design får dybde og lys i stedet for en flad tomhed. De gradienter, der ser dyre ud, bruger næsten aldrig ren `#000000`. De starter i en nuanceret sort, for eksempel `#0b0b10`, lader lysstyrken ændre sig med blot nogle få procent og tilføjer én enkelt kilde til farve eller lys et sted i feltet.

Her får du nuancerede sorte toner, kopierbare koder til sorte gradienter, løsningen på de striber, der plager mørke overgange, og regler for tekst. Vil du vide mere om mørke baggrunde generelt, så se [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds). Og for at forstå, hvordan overgange virker, så begynd med [hvad en gradient er](https://gradiently.design/da/guide/what-is-a-gradient).

## Hvorfor ren sort ser flad ud

`#000000` har ingen farvetone og ingen mørkere sted at gå hen, så et design bygget på den har ingen skygger, kun fravær. Intet i virkeligheden er så sort: et mørkt rum, en nattehimmel og sort stof bærer alle et spor af farve og en langsom ændring i lysstyrke. Dit øje læser den ændring som dybde.

- Ren sort: ingen dybde: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Nuanceret næsten sort: dybde: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Side om side ligner den nuancerede udgave en flade, som lyset falder på. Den rene sort ligner et hul.

Der er også en praktisk grund. På OLED-skærme slukker rene sorte pixels helt, og på nogle telefoner tager det et øjeblik at tænde dem igen, hvilket kan give en kort udtværing, når mørkt indhold ruller. Løfter du din mørkeste værdi et par trin over nul, undgår du det, og det koster dig ingenting visuelt.

## Nuancerede sorte toner: farverne inde i en god sort

En nuanceret sort er en meget mørk farve med lidt mætning tilbage. I HSL bør lysstyrken ligge mellem cirka 4 % og 9 %, mens mætningen kan ligge et sted mellem 15 % og 40 %. Farvetonen bestemmer stemningen: blåsort føles teknisk og kølig, varme brune toner minder om læder og kaffe, og aubergine føles som aften.

- Blæk: #0b0b10
- Marineblåsort: #0a0e17
- Skovsort: #0b120f
- Auberginesort: #120b14
- Espresso: #14100d
- Grafit: #161618

Seks nuancerede sorte toner. Hver for sig ligner de næsten hinanden, men ved siden af hinanden og ved siden af farve viser deres temperatur sig.

Arbejder du i OKLCH, er tallene lettere at ræsonnere over: lysstyrke omkring 15 % til 20 % og kromatik mellem 0,005 og 0,025. Blæk ovenfor er `oklch(15.2% 0.011 285)`, en sort med et let strejf af blå. Vores guide til [farvekoder](https://gradiently.design/da/guide/color-codes-explained) forklarer, hvordan du læser værdierne.

## Koder til sorte gradienter, du kan kopiere

Hver af dem holder sin mørkeste værdi over ren sort og ændrer lysstyrken forsigtigt. Brug dem som hele baggrunde, hero-sektioner eller slidebaggrunde, og vælg den, hvis temperatur passer til din accentfarve.

- Blækfald: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Blåsort spotlys: `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%)`
- Sort til violet: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- Sort til gløder: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Sort og guld: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Midnatsturkis: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Otte sorte gradienter, alle til at kopiere. De første fire holder sig tæt på neutral, de sidste fire lader én farve stige op af mørket.

Retning betyder mere på sort end noget andet sted, fordi der ellers sker så lidt. Lys, der falder oppefra, læses som naturligt og roligt. Lys, der stiger op fra et hjørne forneden, læses som et skær, som en skærm eller en flamme, og trækker øjet mod hjørnet. Læs mere i [gradientvinkler](https://gradiently.design/da/guide/gradient-angle).

## Gradienter fra sort til farve

De mest slående sorte gradienter lader én farve træde frem af mørket. To regler holder dem rige. For det første: giv farven højst en tredjedel af feltet, så sort forbliver hovedtonen. For det andet: mørkn farven mod sort langs sin egen farvetone i stedet for at lade den blegne gennem gråt. En violet skal passere dyb indigo på vej ned, ikke trækul. En grå midte er den hyppigste årsag til [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients).

Violet skær ud af sort: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

Violetten passerer dyb ametyst og blomme på vej mod sort, så aftagningen forbliver farvet i stedet for grå.

Moderne browsere kan klare noget af det for dig. Interpolerer du i OKLCH, bevarer farvens kromatik livet gennem de mørkere stop, og en almindelig reservelinje dækker ældre browsere.

```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 anden deklaration vinder, hvor `in oklch` understøttes, og ignoreres andre steder.

## Sådan stopper du striber i mørke gradienter

Skærme viser som regel 256 niveauer pr. farvekanal. En gradient fra `#0a0a0a` til `#1a1a1a` har kun 16 af dem at arbejde med, så over en hero på 1920 pixel i bredden er hvert trin cirka 120 pixel bredt, og du ser striber. Det kaldes [gradientstriber](https://gradiently.design/da/guide/gradient-banding), og mørke gradienter rammes hårdest.

### Giver striber

- Et langt, meget smalt lysstyrkespænd, som fra #0a0a0a til #1a1a1a
- Helt neutrale grå toner, hvor alle tre kanaler skifter trin samtidig
- At eksportere en mørk gradient som komprimeret JPEG
- At strække et lille gradientbillede ud over en stor skærm

### Løser det

- Et let lag korn eller støj over gradienten
- En svag farvetone, så den røde, grønne og blå kanal skifter trin forskellige steder
- At eksportere i fuld størrelse som PNG eller tegne gradienten direkte i CSS
- Et bredere lysstyrkespænd eller en kortere strækning til overgangen

Korn er den mest pålidelige løsning, fordi det bryder hvert trins skarpe kant op til tekstur, som øjet blander sammen igen. Nogle få procents dækning er nok. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) går i dybden med udtrykket. Her er den minimale CSS.

```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");
}
```

Et SVG-støjlag med 8 % dækning skjuler trinene i en mørk gradient uden at se snavset ud.

## Tekst og farve på en sort gradient

Sorte flader lader næsten enhver lys tekst bestå kontrasttesten, så risikoen flytter sig til din sekundære tekst. Mellemgrå toner, der ser fine ud på en lys skærm, kan falde under minimummet på 4,5:1 for brødtekst. Ren hvid har også en pris: nogle læsere oplever skarp hvid på næsten sort som hård i lange afsnit, så en varm off-white er mildere og læses stadig knivskarpt. Se [farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility) for de fulde regler.

| Tekstfarve | Kontrast på #0b0b10 | Brug den til |
| --- | --- | --- |
| `#ffffff` hvid | 19,6:1 | Korte overskrifter |
| `#f2efe9` varm off-white | 17,1:1 | Overskrifter og brødtekst |
| `#a1a1aa` lysegrå | 7,7:1 | Sekundær tekst |
| `#8a8a93` mellemgrå | 5,7:1 | Billedtekster og etiketter |
| `#6b6b75` dæmpet grå | 3,7:1 | Kun stor tekst, 24 px og op |
| `#4a4a52` trækul | 2,2:1 | Pynt, aldrig ord |

Kontrastforhold beregnet med WCAG-formlen mod sorten Blæk. Alt under 4,5:1 er for svagt til almindelig brødtekst.

Et opslag i højformat med ordene Efter mørkets frembrud sat i off-white på en dyb, blødt oplyst næsten sort gradient

Et næsten sort felt, én varm off-white linje og én accent: det klassiske layout til en sort gradient.

## Hvor sorte gradienter virker bedst

- **Lanceringer og afsløringer**, hvor et mørkt felt får ét produkt eller én overskrift til at føles oplyst
- **Luksus, parfume og smykker**, parret med en metalaccent som `#c9a96e`
- **Musik, natteliv og events**, med én mættet farve, der stiger op fra et hjørne
- **Tech- og udviklerprodukter**, hvor blåsort føles præcis
- **Grænseflader i mørk tilstand**, med to eller tre nuancerede sorte toner som overfladelag
- **Fotografiporteføljer**, hvor en stille sort ramme lader billederne bære farven

I Gradiently lader Markedet dig søge Marks på farveord som »næsten sort« eller »sort og guld«, og hver Mark har allerede korn og lys, så problemerne med striber og fladhed ovenfor er løst, før du går i gang.

## FAQ

### Hvad er den bedste hex-kode til en sort gradient?

Start med en nuanceret næsten sort som `#0b0b10` (blåsort) eller `#14100d` (varm espresso) i stedet for `#000000`, og lad det lyseste stop ligge et par trin højere, for eksempel `#1c1c24`.

### Hvorfor har min sorte gradient striber?

Næsten-sorte værdier har meget få lysstyrketrin imellem sig, så hvert trin bliver et synligt bånd. Læg et let lag korn ovenpå, giv de sorte toner en svag farvetone, eller udvid lysstyrkespændet.

### Hvilken tekstfarve ser bedst ud på en sort gradient?

En varm off-white som `#f2efe9` læses knivskarpt og føles blødere end ren hvid. Hold grå sekundær tekst på en kontrast på 4,5:1 eller højere.

### Hvordan laver jeg en gradient fra sort til farve, der ikke bliver mudret?

Mørkn farven langs sin egen farvetone på vej mod sort, for eksempel violet gennem dyb indigo, i stedet for at lade den blegne gennem gråt. Det hjælper at interpolere i OKLCH i CSS.

### Er en sort gradient god til mørk tilstand?

Ja, hvis den er subtil. Overflader i mørk tilstand virker bedst som to eller tre nuancerede sorte toner med få procents forskel, og en synlig gradient bør blive på store baggrundsflader.