# Sfeervolle verlopen: donkere, rijke codes met atmosfeer

[Canonical HTML page](https://gradiently.design/nl/guide/moody-gradients)

Donker is makkelijk. Atmosfeer is moeilijker: die komt uit waar het licht valt, hoeveel kleur je inhoudt en waar de schaduwen van gemaakt zijn. Twaalf codes, en de redenering erachter.

## The short version

- Een sfeervol verloop is een donkere overgang waarvan het grootste deel van het beeld in schaduw ligt en kleur alleen verschijnt waar licht valt.
- Sfeervolle verlopen gebruiken gedempte, licht vergrijsde kleuren in plaats van verzadigde, daarom voelen ze filmisch in plaats van luid.
- Schaduwen met een vleugje kleur, zoals blauwzwart of pruimzwart, lezen rijker dan zuiver zwart.
- Eén warm licht tegen een koele ondergrond is de snelste manier om een donker verloop atmosfeer te geven.
- Donkere verlopen vertonen meer banding dan lichte, dus voeg wat korrel toe en exporteer als PNG of video van hoge kwaliteit.

Een **sfeervol verloop** is een donkere overgang die zich gedraagt als een schemerig verlichte kamer: het grootste deel van het beeld ligt in schaduw, één gebied vangt het licht en de kleuren worden ingehouden in plaats van opgedreven. Het recept is simpel te zeggen. Begin met een getint bijna-zwart, voeg een of twee gedempte middentonen toe en laat één licht, vaak warm tegen een koele ondergrond, het oppervlak tot leven brengen. Hieronder staan twaalf codes om te kopiëren, daarna hoe je je eigen bouwt en woorden erop leesbaar houdt.

## Wat een verloop sfeervol maakt, niet alleen donker

Veel donkere verlopen voelen vlak. Marineblauw dat naar zwart vervaagt is donker, maar er zit geen weer in. Sfeer komt uit een paar beslissingen die fotografen en filmkleurisen instinctief nemen, en die je bewust kunt nemen.

- **Low key.** Ruwweg driekwart van het beeld is schaduw. Licht is de uitzondering, niet de regel.
- **Eén bron.** Licht komt binnen vanuit een hoek of rand, zodat het oog weet waar het raam of de lamp is.
- **Ingehouden kleur.** Middentonen zijn licht vergrijsd. Een stoffig turkoois voelt sfeervoller dan een helder.
- **Gekleurde schaduwen.** Het donkerste punt is blauwzwart, groenzwart of ossenbloed, nooit `#000000`.
- **Temperatuurcontrast.** Een klein warm licht in een koele scène, of andersom, creëert spanning.

### Donker maar vlak

- Zuiver zwart aan één uiteinde
- Helder, verzadigd accent
- Licht gelijkmatig over het beeld verdeeld
- Rechte diagonaal, van hoek naar hoek
- Perfect gladde digitale ondergrond

### Sfeervol

- Getinte schaduw die nog een tint heeft
- Gedempt accent, licht vergrijsd
- Licht verzameld op één plek
- Radiale of zacht schuine uitloop
- Fijne korrel, als film

## Twaalf sfeervolle verloopcodes

Elk daarvan is één CSS-waarde die je in `background` kunt plakken. Ze zijn losjes gegroepeerd op temperatuur: eerst koel en stormachtig, dan de warme, lamplichtige, dan een paar daartussenin.

- Storm: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Middernachtpetrol: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Diepzee: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Bos in de schemering: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Ossenbloed: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Laatste sintel: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Bij kaarslicht: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Straatlantaarn: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Blauwgeslagen pruim: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Inkt en violet: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Mos en brons: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Grafietroos: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Twaalf sfeervolle verlopen. Merk op dat geen enkele op zuiver zwart eindigt en geen enkele een volledig verzadigde kleur gebruikt.

Wil je iets dat dichter bij een heldere nacht ligt dan bij een stormachtige, dan leunen [nachthemelverlopen](https://gradiently.design/nl/guide/night-sky-gradient) blauwer en voegen sterren toe. Voor diepere, glanzendere kleur met meer verzadiging zitten [edelsteentinten](https://gradiently.design/nl/guide/jewel-tone-colors) een stap helderder dan alles hier.

## Een sfeervol kleurenpalet om op te bouwen

Maak je je eigen, werk dan vanuit een palet in plaats van twee kleuren. Vijf is ruim voldoende: een ondergrond, twee schaduwstappen, één gedempte middentoon en één licht. Het licht is de enige kleur die echte helderheid mag hebben, en het moet in een klein gebied verschijnen.

- Nachtondergrond: #0d1117
- Diep leisteen: #1b2330
- Storm: #2c3a4a
- Regengrijs: #5b6b78
- Lampamber: #c98a3a

Een koel, regenachtig palet met één warm licht. Verruil de amber voor een stoffig roze of een bleek natriumgeel en het verhaal verandert helemaal.

Waarom warm licht zo goed werkt tegen koele schaduw staat uitgelegd in [kleurtemperatuur](https://gradiently.design/nl/guide/color-temperature). Voor meer kant-en-klare sets zie je [donkere kleurpaletten](https://gradiently.design/nl/guide/dark-color-palettes).

## Een sfeervol verloop maken in CSS

1. **Stel een getinte ondergrond in** Kies een bijna-zwart met een tint erin, zoals `#0b0d12` voor blauwzwart of `#120806` voor warm bruinzwart. Gebruik het ook als terugval voor `background-color`.
2. **Voeg het schaduwlichaam toe** Leg een zacht lineair verloop tussen twee donkere stappen van dezelfde tint. Dat geeft het beeld diepte voordat er licht komt.
3. **Plaats één licht** Voeg in een hoek een radiaal verloop toe dat rond 40 procent naar `transparent` vervaagt. Houd de kleur gedempt en de dekking ruim onder volledig.
4. **Voeg een koel tegenlicht toe** Optioneel een tweede, grotere en zwakkere radiaal in de tegenovergestelde hoek, in de koele familie. Het voorkomt dat de schaduwkant dood gaat.
5. **Rond af met korrel** Een fijne ruislaag met lage dekking verbergt banding en laat het oppervlak als film voelen. [Korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) heeft de code.

```css
.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%);
}
```

Een straatlantaarngloed rechtsboven, een koele turkooizen waas linksonder en een leisteen lichaam. Drie lagen, geen afbeeldingen.

> **Donkere overgangen vertonen banding** Met zo weinig bereik tussen de donkerste en lichtste waarden tonen sfeervolle verlopen op veel schermen en na compressie getrapte banden. Korrel, PNG-exports en het vermijden van zware JPEG-kwaliteitsinstellingen helpen allemaal. [Verloopbanding](https://gradiently.design/nl/guide/gradient-banding) legt de oplossing uitgebreid uit.

## Woorden op een sfeervolle achtergrond zetten

Lichte letters op een donkere ondergrond lezen goed, tot ze de ene heldere plek kruisen waar je zo hard aan hebt gewerkt. Plan de kop voor de schaduwkant en houd het licht weg van de woorden in plaats van erachter. Een zacht gebroken wit, zoals `#ece6dc`, zit prettiger op een sfeervolle ondergrond dan zuiver wit, dat hard kan ogen.

Een donkere verticale eventstory waarbij het lichte gebied van de achtergrond achter de kop De nachtshow zit

De achtergrond loopt dwars door de woorden, dus het helderste gebied kan achter de kop belanden.

Dezelfde donkere eventstory met een rustige schaduw achter de kop en de gloed beperkt tot één rand

Hier verplaatst de Mark zijn rustigste, donkerste gebied achter de tekst, en blijft het licht aan de rand.

Die rechtse versie is wat een Gradiently-Mark vanzelf doet: hij weet waar de woorden staan, verdiept de kleur bij de letters en kiest per regel lichte of donkere letters uit zijn eigen palet, zonder vakken of schaduwen. [Tekst op een verloop](https://gradiently.design/nl/guide/text-on-gradient) behandelt de handmatige versie.

## Waar sfeervolle verlopen het best werken

| Gebruik | Probeer | Formaat |
| --- | --- | --- |
| Story voor een laat evenement of clubavond | Inkt en violet, Straatlantaarn | 1080×1920 |
| Podcasthoes | Ossenbloed, Grafietroos | 3000×3000 |
| Menuposter voor een restaurant of bar | Bij kaarslicht, Mos en brons | A4, 2480×3508 |
| Websitehero voor een studio of bureau | Storm, Middernachtpetrol | 1920×1080 |
| YouTube-thumbnail voor een thriller of essay | Laatste sintel, Diepzee | 1280×720 |
| Spotify-playlisthoes | Bos in de schemering, Blauwgeslagen pruim | 1080×1080 |

Sfeervolle verlopen passen bij alles wat ’s nachts gebeurt, alles wat doordacht wil voelen en alles waar naar geluisterd moet worden in plaats van dat het geroepen wordt.

Ze passen bij nacht, muziek, drank, film, parfum en stille luxe. Ze passen veel minder bij een kinderfeestje of een zomeruitverkoop. Voor een hele interface in dit register behandelt [donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) de extra zorg die schermen nodig hebben.

Wil je liever geen lagen met de hand afstemmen, dan heeft de Markt levende Marks in precies dit register, doorzoekbaar met woorden als “diep turkoois” of “ossenbloed”. Je kunt gratis ontwerpen met elke niet-geclaimde Mark, en een Mark claimen betekent dat de poster van niemand anders dezelfde atmosfeer draagt.

## FAQ

### Welke kleuren maken een sfeervol verloop?

Getinte bijna-zwarten zoals blauwzwart of pruimzwart, een of twee gedempte middentonen zoals stoffig turkoois of leisteen, en één warmer licht zoals amber of sintel.

### Hoe verschilt een sfeervol verloop van een donker verloop?

Een donker verloop hoeft alleen donker te zijn. Een sfeervol verloop heeft een duidelijke lichtbron, ingehouden kleur en gekleurde schaduwen, en dat geeft het atmosfeer.

### Moet een sfeervol verloop zuiver zwart gebruiken?

Meestal niet. Een bijna-zwart met een vleugje tint, zoals `#0b0d12`, ziet er rijker uit en gaat soepeler over in de kleuren eromheen.

### Waarom ziet mijn donkere verloop er gestreept uit?

Dat is banding, die het meest opvalt in donkere, subtiele overgangen. Voeg fijne korrel toe en exporteer als PNG of video van hoge kwaliteit in plaats van een gecomprimeerde JPEG.

### Welke tekstkleur werkt op een sfeervol verloop?

Een zacht gebroken wit leest meestal het best. Plaats het over de schaduwkant, weg van het helderste gebied, en controleer het contrast waar elke regel staat.