# Gradient overlay: kleur een foto zonder haar te verbergen

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

Een goede overlay verandert de sfeer van een foto en geeft je tekst een plek om te staan, terwijl het beeld zichtbaar blijft. Een slechte maakt van elke afbeelding hetzelfde troebele vlak. Zo zie je het verschil.

## The short version

- Een gradient overlay is een kleurlaag die over een foto uitloopt en dient om het beeld te tinten, een sfeer te zetten of een rustiger vlak voor tekst te maken.
- De meest gebruikte overlay is een scrim: aan de ene rand transparant en aan de andere donker, zodat alleen het deel van de foto achter de tekst donkerder wordt.
- Een kleurwash gebruikt merkkleuren met gedeeltelijke dekking, vaak met een overvloeimodus zoals multiply, screen of color, zodat de foto zijn detail houdt.
- Overlays werken het best als ze alleen het gebied bedekken dat hulp nodig heeft, in plaats van het hele beeld gelijkmatig te dimmen.
- Moet een scrim aan de donkerste rand zo'n 80 procent dekking halen voordat de tekst leest, kies dan een rustiger foto of verplaats de tekst.

Een **gradient overlay** is een kleurlaag die over een foto uitloopt en er bovenop ligt om hem te tinten, een reeks beelden te verenigen of een kop leesbaar te maken. De kneep is dat hij uitloopt: het ene deel van de foto wordt sterk geraakt, de rest nauwelijks. Daarom ziet een gradient overlay doordacht uit waar een egaal zwart vlak van 50 procent op een noodgreep lijkt. Jij bepaalt waar de kleur landt, hoe sterk hij wordt en hoe hij met het beeld eronder mengt.

## Vier soorten gradient overlay

Bijna elke overlay op een website, poster of post is een van vier typen. Weten welke je nodig hebt scheelt veel gesleutel aan dekkingsschuifjes.

| Overlay | Wat hij doet | Gebruik hem voor |
| --- | --- | --- |
| Scrim | Transparant naar donker langs één rand | Koppen en bijschriften op drukke foto's |
| Kleurwash | Merkkleuren met gedeeltelijke sterkte over het hele beeld | Losse foto's laten aanvoelen als één set |
| Duotone of verloopkaart | Vervangt de kleuren van de foto door twee of meer van jou | Sterke, grafische looks; zie [het duotone-effect](https://gradiently.design/nl/guide/duotone-effect) |
| Vignet | Verdonkert de hoeken met een radiale uitloop | Het oog naar het midden trekken |

De vier overlayfamilies. De meeste ontwerpen hebben er maar één nodig, niet alle vier.

## De scrim: een overlay voor tekst

Een scrim is het werkpaard. Hij begint volledig transparant en wordt donkerder richting de rand waar je tekst staat, meestal onder of links. De foto blijft onaangeroerd waar het onderwerp staat en de tekst krijgt een rustige, donkere vloer. Gebruik een donkere toon uit de foto zelf in plaats van zuiver zwart: een diep bruin over een warm interieur, een marineblauw over een zeegezicht. Zuiver zwart ziet eruit als een veeg.

- Scrim onderaan, marineblauw: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Scrim links, warm bruin: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vignet: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Drie overlays op zichzelf, voordat er een foto onder komt. Elk blijft helder waar het onderwerp zou staan.

De bovenste 40 procent van de scrim onderaan is volledig helder, zodat gezichten en producten licht blijven. Het donker bouwt zich op door de onderste helft en piekt aan de uiterste rand, precies waar een bijschrift staat. Meer manieren om woorden op beelden leesbaar te houden vind je in [leesbare tekst op foto's](https://gradiently.design/nl/guide/readable-text-on-photos).

## Kleurwash-overlays en overvloeimodi

Met een kleurwash laten merken stockfoto's, telefoonfoto's en eventbeelden als één familie ogen. Leg een verloop van twee merkkleuren over de foto en wijzig de overvloeimodus. De overvloeimodus bepaalt hoe de kleur met het beeld mengt, en dat telt zwaarder dan de kleuren zelf.

| Overvloeimodus | Effect op de foto | Goed bij |
| --- | --- | --- |
| Normal | Bedekt de foto met de dekking die je instelt | Scrims achter tekst |
| Multiply | Verdonkert en tint; wit neemt de overlaykleur aan | Lichte, luchtige foto's |
| Screen | Verlicht en tint; zwart neemt de overlaykleur aan | Donkere, sfeervolle foto's |
| Color | Behoudt licht en schaduw van de foto, wisselt de tinten | Eén sterke merktint |
| Soft light | Zacht contrast en tint | Subtiele washes op portretten |

Overvloeimodi heten hetzelfde in CSS, Figma, Photoshop en de meeste ontwerptools.

Wash van violet naar koraal: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)`

Een wash van drie kleuren met afnemende dekking. Op multiply over een bleke foto leest hij als een warme violette schemering; op screen over een donkere gloeit hij.

## Een gradient overlay aan een foto toevoegen

1. **Bepaal waar de overlay voor dient** Tekst, sfeer of samenhang. Een scrim voor tekst, een wash voor sfeer en samenhang. Kun je niet zeggen welke, dan heb je er waarschijnlijk geen nodig.
2. **Pak een donkere toon uit de foto** Kies voor een scrim de diepste kleur die al in het beeld zit, voor een wash twee merkkleuren.
3. **Teken het verloop over het gebied dat het nodig heeft** Begin helder over het onderwerp en bouw op naar de rand met de tekst. Houd de uitloop lang, zodat er geen zichtbare lijn is.
4. **Kies een overvloeimodus** Normal voor scrims, multiply voor lichte foto's, screen voor donkere, color voor één tint.
5. **Verlaag de dekking tot hij bijna verdwijnt** Zet hem daarna één stap terug omhoog. De beste overlays valt alleen op als je ze uitzet.
6. **Controleer de tekst op telefoonformaat** Verklein het ontwerp tot het formaat waarop het gezien wordt en lees elk woord. Contrast dat op een monitor werkt, kan op een telefoon falen; [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility) geeft de doelwaarden.

## Hoe donker een gradient overlay mag zijn

### Verbergt de foto

- Een egale zwarte laag van 50 procent over alles
- Dezelfde overlay op elk beeld, wat het licht ook is
- Zuiver zwart of grijs dat huid en eten doof maakt
- Een harde rand waar het verloop stopt
- Een overlay zo sterk dat de foto van alles kan zijn

### Tint de foto

- Helder over het onderwerp, alleen donkerder achter woorden
- Sterkte per foto aangepast
- Een donkere toon uit het beeld of het merk
- Een lange, geleidelijke uitloop zonder lijn
- De foto in één oogopslag nog herkenbaar

Als werkgrens geldt: moet de donkerste rand van een scrim zo'n 80 procent halen voordat de tekst leest, dan is de foto op die plek te druk. Verplaats de tekst, snij anders bij of kies een rustiger beeld. Een wash over het hele beeld heeft veel minder nodig, anders lijkt de foto niet meer op een foto.

## Gradient overlays op een website

Op het web kun je overlay en foto in één declaratie stapelen, zodat ze bij elkaar blijven als het beeld wisselt. De overlay komt eerst, omdat CSS de eerste laag bovenop schildert. De volledige set technieken, inclusief overvloeimodi en pseudo-elementen, staat in [gradient overlay CSS](https://gradiently.design/nl/guide/css-gradient-overlay).

```css
.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
```

Een scrim onderaan over een herofoto. Wissel het beeld en de overlay blijft.

## Een wash die elke keer bij je merk past

Overlays lopen uit de pas als elke ontwerper eigen kleuren kiest. In de Gradiently Studio kun je foto's tinten in de eigen kleuren van je Mark, als mono, duotone of wash, zodat beelden uit verschillende bronnen één palet delen zonder handmatig afstemmen. En staan woorden op een Mark in plaats van op een foto, dan maakt de Mark het vlak erachter vanzelf rustiger, helemaal zonder overlay. Lees [duotone-foto's in de kleuren van je Mark](https://gradiently.design/nl/guide/photo-duotone-in-mark-colours) voor hoe de wash werkt.

Een woningpost waarbij de kop Net te koop op het drukste deel van de achtergrond staat

Zonder hulp loopt de drukste kleur dwars door de kop.

Dezelfde woningpost met een rustiger, dieper vlak achter de kop zodat elke regel leest

Met de reagerende Mark wordt het vlak achter de woorden rustiger, het werk dat een scrim gewoonlijk doet.

## FAQ

### Wat is een gradient overlay?

Een kleurlaag die over een afbeelding uitloopt en erbovenop ligt om haar te tinten, een sfeer te zetten of tekst beter leesbaar te maken. Hij verschilt van een egale overlay doordat zijn sterkte over het beeld verandert.

### Welke dekking moet een foto-overlay hebben?

Gebruik zo weinig als nodig is om de tekst leesbaar te maken: vaak 50 tot 80 procent aan de donkerste rand van een scrim, en veel minder voor een wash over de hele foto. Heb je meer nodig, dan is de foto op die plek waarschijnlijk te druk.

### Welke overvloeimodus is het best voor een kleuroverlay?

Multiply past bij lichte foto's, screen bij donkere en color wisselt de tinten van de foto terwijl licht en schaduw blijven. Gebruik normal voor scrims achter tekst.

### Moet ik zwart gebruiken voor een gradient overlay?

Meestal niet. Een diepe toon uit de foto, zoals een donker marineblauw of bruin, verdonkert het beeld zonder het doods te maken.

### Hoe voeg ik een gradient overlay toe in CSS?

Zet het verloop eerst en de afbeelding als tweede in `background-image`, bijvoorbeeld `linear-gradient(...), url(photo.jpg)`. De eerste laag wordt bovenop geschilderd.