# Transparante verlopen in CSS: fades, overlays en scrims

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

Een verloop dat tot niets vervaagt is een van de nuttigste hulpmiddelen in CSS. Vroeger liet het ook een grijze veeg in het midden achter. Zo werkt transparantie in verlopen nu, en dit zijn de patronen die het bewaren waard zijn.

## The short version

- Om een CSS-verloop transparant te maken, gebruik je een kleur met alfa nul als een van de stops, zoals transparent of rgb(124 58 237 / 0).
- Moderne browsers interpoleren verloopkleuren met voorvermenigvuldigde alfa, dus een kleur laten uitfaden naar het sleutelwoord transparent geeft geen grijze band meer.
- Een achtergrondverloop kan alleen de achtergrond laten vervagen; om de eigenlijke inhoud van een element te laten vervagen gebruik je mask-image met een verloop.
- Een scrim met meerdere verzachte stops ziet er gladder uit dan een fade met twee stops, die een zichtbare rand toont waar de verdonkering stopt.
- Een radiaal verloop dat in het midden transparant en buiten donker is, maakt een spotlight die de aandacht op één gebied vestigt.

Om een **CSS-verloop transparant** te maken, geef je een van zijn stops een kleur met alfa nul: `linear-gradient(to bottom, #7c3aed, transparent)` laat violet tot niets vervagen, zodat wat eronder zit doorschijnt. Gebruik hetzelfde idee voor fades aan het einde van tekst, donkere scrims achter bijschriften en gekleurde overlays op foto’s. Om de inhoud van een element te laten vervagen in plaats van de achtergrond gebruik je in plaats daarvan `mask-image` met een verloop.

## Manieren om een transparante kleur te schrijven

| Wat je schrijft | Betekent | Gebruik het wanneer |
| --- | --- | --- |
| `transparent` | Zwart met alfa nul | Elke kleur laten uitfaden, in moderne browsers |
| `rgb(124 58 237 / 0)` | Dit violet met alfa nul | Expliciet willen zijn, of heel oude browsers ondersteunen |
| `rgb(124 58 237 / 0.4)` | Dit violet op 40 procent | Een tint die nooit helemaal verdwijnt |
| `#7c3aed66` | Hex van acht cijfers, ongeveer 40 procent | Ontwerptools die hex met alfa exporteren |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | De kleur van een variabele op 40 procent | Kleuren die in custom properties staan |

Vijf manieren om hetzelfde soort ding te zeggen. De `color-mix()`-vorm is de enige die werkt op een kleur die je alleen als variabele kent; zie [color-mix() in CSS](https://gradiently.design/nl/guide/css-color-mix).

## Waarom fades vroeger grijs werden

Het sleutelwoord `transparent` is zwart met alfa nul. Vroege browsers mengden de rood-, groen- en blauwkanalen en het alfakanaal apart, dus een fade van wit naar `transparent` ging onderweg door half transparant grijs. Daarom staan oudere tutorials op `rgba(255, 255, 255, 0)`.

De specificatie eist nu voorvermenigvuldigde alfa: elke kleur wordt vóór het mengen gewogen met zijn dekking, dus een volledig transparante stop draagt helemaal geen kleur bij. Elke huidige browser doet dit. De bijpassende kleur met alfa nul schrijven blijft een onschuldige gewoonte, en houdt je veilig in e-mailclients en oude WebViews.

### Oud gedrag

- Wit naar `transparent` zakt door grijs
- Kleurkanalen gemengd zonder rekening te houden met dekking
- Omweg: herhaal de kleur met alfa nul

### Huidige browsers

- Wit naar `transparent` blijft wit terwijl het vervaagt
- Voorvermenigvuldigde alfa, zoals de specificatie eist
- Beide vormen werken; de expliciete is draagbaarder

- Violet dat uitfaadt: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Groenblauw dat 70 procent uitfaadt: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Oranje gloed op niets: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Drie fades getoond over de eigen achtergrond van deze pagina, precies wat ze in jouw layout doen. Stapel fades als deze over een basiskleur voor zachte, gelaagde achtergronden.

Waar de fade eindigt telt even zwaar als de kleuren. Een stop op 70 procent maakt de fade vroeg af en laat de rest van de box volledig helder, ideaal voor een tint die maar één rand moet raken. Twee stops op dezelfde positie geven een harde overgang van kleur naar niets, handig voor half gevulde balken en gesplitste achtergronden. Stopposities worden uitgelegd in [CSS lineaire verlopen](https://gradiently.design/nl/guide/css-linear-gradient).

## Inhoud laten vervagen met mask-image

Een achtergrondverloop ligt achter de inhoud, dus kan het geen tekst, afbeeldingen of een scrollende lijst laten vervagen. Een masker wel. Met `mask-image` houden ondoorzichtige delen van het verloop het element zichtbaar en verbergen transparante delen het. De kleur van het masker doet er niet toe, alleen de alfa.

```css
/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}
```

Maskers laten alles vervagen wat er staat, op elke paginakleur, licht of donker. `mask-image` zonder voorvoegsel werkt in huidige browsers; voeg `-webkit-mask-image` toe voor oudere Safari.

Het oude alternatief was een wit verloop over de inhoud. Dat breekt zodra de pagina niet wit is, bijvoorbeeld in de [donkere modus](https://gradiently.design/nl/guide/dark-mode-design), en blokkeert klikken tenzij je `pointer-events: none` onthoudt. Een masker heeft geen van beide problemen.

## Scrims: transparante verlopen voor tekst

Een scrim verdonkert een deel van een afbeelding zodat tekst erop leest, en vervaagt naar volledig transparant zodat de rest van de foto helder blijft. Een fade met twee stops werkt, maar zijn rechte helling laat een zichtbare lijn waar de verdonkering eindigt. Meer stops, verdeeld om af te vlakken, verbergen die rand.

Verzachte scrim, zeven stops: `linear-gradient(to top, rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%, rgb(2 6 23 / 0) 100%)`

De dekking daalt snel bij de tekst en langzaam bovenaan, wat leest als natuurlijke schaduw in plaats van een band.

```css
.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}
```

De scrim is de eerste achtergrondlaag, dus ligt bovenop de foto.

Tint de scrim met een diepe versie van de kleur van de foto in plaats van puur zwart en hij voelt als deel van het beeld. Op een warme zonsondergangfoto zakt een diep bruin zoals `rgb(41 20 8 / 0.75)` in de afbeelding weg, waar zwart eruitziet als een filter erbovenop. [Verloopoverlays in CSS](https://gradiently.design/nl/guide/css-gradient-overlay) behandelt kleurwassingen en blendmodi, en [tekst over afbeeldingen](https://gradiently.design/nl/guide/text-over-image) behandelt plaatsing.

## Transparante gaten en spotlights

Draai het idee om: transparant in het midden, donker daarbuiten. Een [radiaal verloop](https://gradiently.design/nl/guide/css-radial-gradient) over een pagina of afbeelding laat één gebied verlicht en dimt al het andere stilletjes, wat past bij onboardingtips, productdetails en dia’s.

```css
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}
```

Stel `--x` en `--y` in vanuit JavaScript om de spotlight te verplaatsen. De overgang van 80 pixels tussen de stops houdt de rand zacht.

Een staande productpost waarbij de kop over een helder gebied van het verloop ligt

Zonder enige vormgeving concurreren woorden met het helderste deel van de achtergrond.

Dezelfde productpost met een rustiger, dieper gebied van het verloop achter de kop

De achtergrond wordt stiller achter de woorden, het werk dat een scrim op een website doet.

Voor socialposts en drukwerk hoef je zelden scrims met de hand te bouwen. In Gradiently maakt de Mark zelf ruimte voor je woorden, door de kleuren bij de letters te verdiepen of te verlichten, zonder overlaylaag om per formaat af te stemmen.

## FAQ

### Hoe laat ik een CSS-verloop naar transparant vervagen?

Gebruik een kleur met alfa nul als laatste stop: `linear-gradient(#7c3aed, transparent)` of, om expliciet te zijn, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Waarom ziet mijn verloop naar transparant er grijs uit?

Oudere browsers mengen zonder voorvermenigvuldigde alfa, dus `transparent` (transparant zwart) maakt het midden grijs. Laat in plaats daarvan uitfaden naar je kleur met alfa nul.

### Hoe laat ik tekst of een afbeelding vervagen met CSS?

Gebruik `mask-image` met een verloop, zoals `mask-image: linear-gradient(#000 60%, transparent)`. Het element vervaagt op elke achtergrondkleur.

### Wat is een scrim in CSS?

Een verloop dat een deel van een afbeelding achter tekst verdonkert en elders naar transparant vervaagt, zodat de tekst leest en de afbeelding helder blijft.

### Kan een CSS-verloop een transparant gat hebben?

Ja. Een radiaal verloop dat in het midden transparant en verder naar buiten donker is, laat een heldere spotlight over wat eronder ligt.