# CSS-verloopoverlay: afbeeldingen goed tinten en verdonkeren

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

Een verloop over een foto leggen kost één extra regel CSS. De juiste van drie methodes bepaalt of de afbeelding snel laadt, de overlay kan animeren en de tekst erbovenop leesbaar blijft.

## The short version

- De snelste verloopoverlay in CSS is een tweede achtergrondlaag: noem het verloop vóór url() in background-image zodat het bovenop ligt.
- Voor een img-element zet je het verloop op een ::before- of ::after-pseudo-element van een gepositioneerde wrapper.
- background-blend-mode en mix-blend-mode maken van een verloopoverlay een kleurwassing die de afbeelding tint in plaats van bedekt.
- Hero-afbeeldingen die als CSS-achtergrond zijn ingesteld worden later ontdekt dan img-elementen, dus een img met een overlay laadt boven de vouw meestal sneller.
- Overlays die tekst moeten dragen zijn het donkerst achter de woorden en elders transparant, niet een gelijkmatige donkere laag over de hele foto.

De eenvoudigste **CSS-verloopoverlay** is een gelaagde achtergrond: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. Lagen die eerst staan worden bovenop getekend, dus het verloop ligt over de foto. Is de afbeelding een `<img>`-element, zet het verloop dan op een pseudo-element, en wil je dat de kleur de foto tint in plaats van bedekt, voeg dan een blendmodus toe. Elke methode past bij een andere klus.

## Methode 1: een gelaagde achtergrond

`background-image` accepteert een lijst gescheiden door komma’s. De eerste waarde is de bovenste laag. Verlopen en afbeeldingen mengen vrij, en elke laag kan een eigen grootte en positie hebben als je die eigenschappen in dezelfde volgorde noemt. Dit is de juiste keuze voor decoratieve afbeeldingen waarbij geen alt-tekst nodig is.

```css
.banner {
  background-color: #0f172a; /* shows until the photo loads */
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
    url("/images/workshop.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}
```

Een donker paneel links voor tekst, dat bij 70 procent verdwijnt zodat de rechterkant van de foto helder blijft. De terugvalkleur komt overeen met de overlay, dus tekst leest zelfs voordat de afbeelding er is.

- Zijpaneel voor tekst: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Balken boven en onder: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)`
- Zachte vignettering: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Diagonale merktint: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`

Vier overlay-presets, hier getoond over de pagina. Zet er een vóór `url()` in je eigen `background-image`.

De balken boven en onder passen bij galerijen waar een titel bovenaan en een bronvermelding onderaan staat. De vignettering trekt het oog naar binnen zonder tekst te dragen. De merktint is een sterke look voor teampagina’s en evenementbanners; [verloopoverlays](https://gradiently.design/nl/guide/gradient-overlay) behandelt wanneer elk goed voelt vanuit ontwerp.

## Methode 2: een pseudo-element over een img

Inhoudsafbeeldingen horen in `<img>`-elementen: ze krijgen alt-tekst, responsieve `srcset`, lazy loading en vroege ontdekking door de browser. Een achtergrondverloop kan niet over een `<img>` liggen, dus wikkel het in en zet het verloop op het pseudo-element van de wrapper.

```html
<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>
```

Een echt afbeeldingselement met echte alt-tekst. Het bijschrift ligt op de overlay.

```css
.overlay {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.overlay figcaption {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  color: #f8fafc;
}

.overlay:hover::after { opacity: 0.6; }
```

`isolation: isolate` houdt het stapelen van de overlay binnen de figure. De overlay kan bij hover infaden omdat hij een eigen laag is.

### Achtergrondlaag

- Eén element, één declaratie
- Geen alt-tekst, dus alleen decoratieve afbeeldingen
- Pas laat gevonden door de browser, wat een hero kan vertragen
- De overlay kan niet infaden zonder de hele achtergrond te animeren

### img plus pseudo-element

- Een wrapper en een paar regels meer
- Echte alt-tekst en responsieve `srcset`
- Vroeg ontdekt; `fetchpriority="high"` helpt de hoofdafbeelding
- De dekking van de overlay verloopt goedkoop

Voor een hero-afbeelding die het grootste element op het scherm is, wint de tweede methode meestal op laadsnelheid. [Afbeeldingen optimaliseren voor het web](https://gradiently.design/nl/guide/lighthouse-image-performance) legt uit waarom de browser `<img>`-elementen eerder vindt dan CSS-achtergronden.

## Methode 3: blendmodi voor kleurwassingen

Een gewone overlay ligt op de foto als getint glas. Een blendmodus mengt het verloop in het eigen licht en donker van de foto, wat meer lijkt alsof de foto in die kleur is genomen. Gebruik `background-blend-mode` voor gelaagde achtergronden en `mix-blend-mode` op een pseudo-element over een `<img>`.

| Blendmodus | Wat het doet | Goede overlay voor |
| --- | --- | --- |
| `multiply` | Verdonkert; witte gebieden nemen de kleur van het verloop aan | Rijke, sfeervolle tinten op heldere foto’s |
| `screen` | Verlicht; zwarte gebieden nemen de kleur aan | Luchtige, vervaagde looks op donkere foto’s |
| `overlay` | Versterkt contrast en duwt kleur in de middentonen | Pakkende merkkleur op portretten |
| `color` | Houdt het licht van de foto, vervangt de kleur | Duotone-achtige wassingen uit een verloop van twee kleuren |
| `soft-light` | Een zachte versie van overlay | Subtiele warmte of koelte |

De vijf modi die het kennen waard zijn. `color` met een tweekleurig verloop is de snelste duotone op het web.

```css
/* Duotone wash on a layered background */
.duotone {
  background-image:
    linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
    url("/images/portrait.jpg");
  background-size: cover;
  background-blend-mode: color;
}

/* The same idea over an img element */
.overlay--wash::after {
  background: linear-gradient(135deg, #1e1b4b, #f472b6);
  mix-blend-mode: color;
}
```

`background-blend-mode` mengt lagen van één element. `mix-blend-mode` mengt een element met wat erachter ligt, hier de foto.

De volledige techniek, inclusief hoe je de twee kleuren kiest, staat in [het duotone-effect](https://gradiently.design/nl/guide/duotone-effect).

## Overlays die tekst leesbaar houden

De meest gemaakte fout is een gelijkmatige donkere laag over de hele foto, zeg 50 procent zwart. Die maakt het beeld overal dof en is achter de woorden toch misschien niet donker genoeg. Vorm de overlay liever: het donkerst onder de tekst, helder waar de foto ertoe doet.

1. **Bepaal waar de woorden komen** Linksonder voor bijschriften, het linker derde voor hero-tekst, het midden voor één regel.
2. **Richt het verloop erop** Gebruik `to top` voor tekst onderaan, `to right` voor tekst links, of een radiaal verloop gecentreerd op de woorden.
3. **Stop vroeg** Laat het verloop bij 60 tot 70 procent volledig transparant worden zodat het grootste deel van de foto onaangeroerd blijft.
4. **Controleer het slechtste geval** Meet het contrast waar de foto achter een letter het helderst is. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) noemt de verhoudingen.

Verzachte scrims met veel stops zien er gladder uit dan een fade met twee stops; de methode staat in [transparante verlopen in CSS](https://gradiently.design/nl/guide/css-gradient-transparent).

## Overlays zonder gokwerk

Op een website stem je elke overlay met de hand af. Voor socialposts, banners en dia’s slaat Gradiently die stap over: een Mark weet waar je woorden staan en verdiept of verlicht zijn eigen kleuren erachter, foto’s kunnen worden getint in de kleuren van de Mark als mono, duotone of wassing, en met Pro past het ontwerp zich in één stap aan op elk formaat, zonder overlay om opnieuw te maken.

Een brede evenementbanner voor Havendagen met een verloopachtergrond die dieper wordt achter de titel

Een evenementbanner op websiteformaat, met de achtergrond die kalmeert achter de woorden in plaats van een met de hand afgestelde overlay.

## FAQ

### Hoe zet ik een verloop over een achtergrondafbeelding in CSS?

Noem het verloop vóór de afbeelding in `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. De eerste laag wordt bovenop getekend.

### Hoe voeg ik een verloopoverlay toe aan een img-element?

Wikkel de afbeelding in een gepositioneerd element en zet het verloop op het `::after`-pseudo-element met `position: absolute` en `inset: 0`.

### Wat is het verschil tussen background-blend-mode en mix-blend-mode?

`background-blend-mode` mengt de achtergrondlagen van één element. `mix-blend-mode` mengt een heel element met wat erachter ligt.

### Hoe donker moet een afbeeldingsoverlay voor tekst zijn?

Donker genoeg dat de tekst de contrastcontroles haalt op het helderste punt erachter. Vorm het verloop zo dat het daar het donkerst is en elders helder.

### Kan ik een verloopoverlay animeren bij hover?

Ja. Zet de overlay op een pseudo-element en laat de `opacity` overgaan, wat goedkoper is dan de achtergrond zelf animeren.