# Glassmorphism en kleurverlopen: een praktische gids

[Canonical HTML page](https://gradiently.design/nl/guide/glassmorphism)

Matglas over een gloeiend kleurverloop is een van de mooiste effecten in interfaceontwerp, en een van de makkelijkste om onleesbaar te maken. Zo krijg je de schoonheid en houd je de woorden.

## The short version

- Glassmorphism is een interfacestijl met doorschijnende, vervaagde panelen, als matglas, gelaagd over kleurrijke achtergronden.
- Het effect hangt af van de achtergrond: matglas over een vlakke kleur ziet eruit als een grijs vak, terwijl glas over een rijk kleurverloop gloeit.
- Het grootste probleem is contrast, omdat tekst op glas staat op de kleur die erachter zit, en die kan veranderen als de pagina scrolt.
- In CSS bouw je glassmorphism met backdrop-filter blur, een halfdoorzichtige vulling, een dunne lichte rand en een terugval voor browsers zonder ondersteuning.
- Glas werkt het best voor een paar zwevende lagen, zoals navigatie, kaarten en dialoogvensters, niet voor elk vlak op een pagina.

**Glassmorphism** is een ontwerpstijl opgebouwd uit matglas: doorschijnende panelen die vervagen wat erachter zit, gelaagd over een kleurrijke achtergrond, meestal een kleurverloop. Het paneel houdt een zweem van de kleur eronder vast, een dunne heldere rand vangt het licht, en de hele interface voelt gelaagd en tastbaar. Besturingssystemen gebruiken al jaren doorschijnende materialen, en in 2025 maakte Apple glas het middelpunt van zijn nieuwe ontwerptaal Liquid Glass, dus deze look verdwijnt niet. Slordig gebruikt levert hij echter grijze vakken en onleesbare tekst op.

## Waarom glassmorphism een kleurverloop nodig heeft

Matglas lijkt pas op glas als er iets kleurrijks achter zit om te vervagen. Over een vlakke witte of grijze achtergrond is een glazen paneel gewoon een net iets ander grijs. Over een rijk kleurverloop, met plassen kleur op verschillende plekken, pakt het paneel zachte kleur op die van de ene rand naar de andere verschuift, en die verschuiving leest het oog als glas. Het kleurverloop is dus geen decoratie: het is de helft van het effect.

- Violet naar cyaan: `radial-gradient(circle at 20% 25%, #8b5cf6 0%, #4c1d95 25%, #0e7490 55%, #0f172a 90%)`
- Roze gloed op indigo: `radial-gradient(circle at 75% 20%, #f472b6 0%, #7c3aed 35%, #1e1b4b 75%)`
- Zonsondergang onder glas: `radial-gradient(ellipse at 30% 80%, #fb923c 0%, #db2777 35%, #3b0764 80%)`

Achtergronden die glas iets geven om op te vangen: duidelijke plassen kleur in plaats van een gladde, gelijkmatige overgang.

De beste achtergronden voor glas hebben sterke, afzonderlijke kleurgebieden en een donkere of diepe basis, net als [mesh gradients](https://gradiently.design/nl/guide/mesh-gradients) of [aurora-kleurverlopen](https://gradiently.design/nl/guide/aurora-gradients). Plaats de helderste plas zo dat hij deels achter een paneel zit; het paneel gloeit waar het overlapt.

## De CSS achter glassmorphism

De kern van het effect is `backdrop-filter`, dat een filter toepast op alles achter een element in plaats van op het element zelf. Combineer het met een halfdoorzichtige vulling, een dunne doorschijnende rand en een zachte schaduw. Huidige versies van de grote browsers ondersteunen het, en oudere versies van Safari hebben het voorvoegsel `-webkit-` nodig; zie [MDN over backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) en [caniuse](https://caniuse.com/css-backdrop-filter).

```css
.glass {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
  color: #ffffff;
}

/* Without backdrop-filter, use a solid, readable panel instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(15 23 42 / 0.88); }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(15 23 42 / 0.92); }
}
```

Een matglazen paneel met een terugval. `saturate()` houdt de vervaagde kleur levendig in plaats van verbleekt.

| Eigenschap | Startwaarde | Wat het regelt |
| --- | --- | --- |
| Blur | 16 tot 30 px | Hoeveel de achtergrond oplost. Te weinig en details schemeren door de tekst |
| Dekking van de vulling | 10 tot 25% wit, of 40 tot 70% donker | Hoeveel het paneel loskomt van de achtergrond |
| Saturate | 120 tot 160% | Houdt vervaagde kleur levendig in plaats van grijs |
| Rand | 1 px op 15 tot 30% wit | De heldere rand die het glas geloofwaardig maakt |
| Schaduw | Groot, zacht, lage dekking | Tilt het paneel van de achtergrond |

Startpunten om op het oog bij te stellen. Meer blur en een sterkere vulling zijn voor tekst altijd veiliger.

## Glassmorphism en contrast

Het grootste probleem met glas is dat de tekst erop staat op wat er achter het paneel zit. Een kop die goed leest over een donker indigo gebied, kan verdwijnen als het paneel over een bleekroze gloed scrolt. Het contrast moet standhouden in het slechtste geval, niet in dat van je mock-up. WCAG vraagt 4,5:1 voor lopende tekst; controleer dat op het lichtste punt dat ooit achter de woorden kan komen.

### Onleesbaar glas

- Lichte blur, zodat vormen erachter door de letters heen schemeren
- Heel doorzichtige vulling over een heldere achtergrond
- Dunne, lichte witte tekst
- Glazen panelen die over wisselende inhoud scrollen

### Leesbaar glas

- Een blur van 16 px of meer, zodat de achtergrond oplost
- Een getinte vulling die sterk genoeg is om contrast te garanderen
- Medium of bold diktes voor tekst op glas
- Glas vast boven een bekende, gecontroleerde achtergrond

Een betrouwbare truc is het glas te tinten naar de donkerste kleur van de achtergrond in plaats van wit te gebruiken. Donker indigo glas op 50% over een kleurverloop van indigo en roze houdt witte tekst overal leesbaar, terwijl de kleur nog doorschemert. Voor meer manieren om woorden helder te houden, zie [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient).

## Wanneer glassmorphism helpt, en wanneer niet

- **Helpt:** zwevende navigatie, dialoogvensters, mediabediening, kaarten over een hero en widgets in de stijl van een vergrendelscherm, waar de laag boven de inhoud moet voelen
- **Helpt:** product- en lanceringspagina’s waar het kleurverloop het merk is en het glas het laat zien
- **Schaadt:** formulieren, tabellen en lang lezen, waar mensen rustig, constant contrast nodig hebben
- **Schaadt:** pagina’s met veel gestapelde glaslagen, die modderig ogen en prestaties kosten
- **Schaadt:** overal waar de achtergrond vlak is of druk met foto’s en kleine tekst

## Zo ontwerp je een glazen interface

1. **Ontwerp eerst de achtergrond** Kies een kleurverloop met afzonderlijke plassen kleur op een diepe basis. Het glas wordt nooit beter dan wat erachter zit.
2. **Beperk glas tot één of twee lagen** Navigatie en één niveau kaarten is ruim genoeg. Glas op glas op glas wordt grijs.
3. **Vervaag genoeg om details op te lossen** Kun je vormen achter het paneel nog onderscheiden, verhoog dan eerst de blur.
4. **Tint voor contrast** Kies de vulkleur en dekking die tekst leesbaar houden boven het lichtste deel van de achtergrond.
5. **Voeg een lichte rand en een zachte schaduw toe** Een doorschijnende rand van 1 px en een brede, vage schaduw laten het paneel lezen als een tastbare plaat.
6. **Test de prestaties op een telefoon** Backdrop blur is duur om te tekenen. Houd vervaagde vlakken bescheiden en animeer ze niet op grote oppervlakken.

Glas is een van de materialen die een kleurverloop kan dragen; [textuur in kleurverlopen](https://gradiently.design/nl/guide/gradient-texture) vergelijkt het met korrel, papier en zijde. Wil je een achtergrond die de plassen, diepte en het licht al heeft die glas nodig heeft, dan zijn veel Marks in de Markt zo opgebouwd, en je kunt met elk ervan gratis ontwerpen.

## FAQ

### Wat is glassmorphism?

Glassmorphism is een ontwerpstijl met doorschijnende panelen van matglas met vervaagde achtergronden, een lichte rand en een zachte schaduw, gelaagd over kleurrijke kleurverlopen.

### Hoe maak ik een glaseffect in CSS?

Gebruik `backdrop-filter: blur()` met een halfdoorzichtige achtergrondkleur, een dunne doorschijnende rand en een zachte schaduw, plus het voorvoegsel `-webkit-` voor oudere Safari.

### Is glassmorphism toegankelijk?

Dat kan, als de blur sterk is, de vulling genoeg getint is om tekst op 4,5:1 contrast te houden boven de lichtste achtergrond, en er een effen terugval is.

### Waarom ziet mijn glazen paneel er grijs uit?

De achtergrond erachter is te vlak. Glas heeft sterke, afzonderlijke kleurgebieden erachter nodig om op te pakken.

### Kost backdrop-filter prestaties?

Het kost meer dan een gewone achtergrond, vooral over grote vlakken of tijdens animatie. Gebruik het voor een paar panelen en test op telefoons.