# Gloedeffect in ontwerp: zacht licht zonder halo om tekst

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

Een gloed moet eruitzien als licht dat op een oppervlak valt: een heldere kern, een lange uitloop en een donkere kamer eromheen. Zet hem achter vormen en in achtergronden en houd hem weg van de randen van je letters.

## The short version

- Een gloedeffect is een heldere kern van kleur die geleidelijk uitvloeit in een donkerder omgeving, zodat het als licht leest en niet als verf.
- Gloed werkt het best op vormen, knoppen, productfoto’s en achtergronden, waar hij diepte toevoegt en het oog stuurt.
- Een halo van gloed rond tekst maakt de randen van de letters wazig en bemoeilijkt het lezen, dus houd woorden scherp en zet het licht elders.
- In CSS is een zachte gloed meestal een radiaal kleurverloop dat naar transparant vervaagt of een box-shadow met een grote blur en zonder verschuiving.
- Een gloed heeft een donkere of gedempte ondergrond nodig om te zien, en een beetje korrel voorkomt banding in zijn lange uitloop.

Een **gloedeffect** is een plek licht: een heldere kern van kleur die langzaam uitvloeit in een donkerder omgeving, alsof er een lamp vlak achter het oppervlak staat. Goed gebruikt voegt het diepte toe aan een vlak ontwerp en trekt het oog naar een product, een knop of een vorm. Slecht gebruikt wordt het een vage ring rond de kop. De regel die deze hele pagina volgt is eenvoudig: zet de gloed op vormen en achtergronden en houd woorden scherp.

## Waar een gloed hoort, en waar niet

Licht rond een object zegt dat dat object ertoe doet. Licht rond letters doet iets anders: het verzacht hun randen, verlaagt het contrast tussen lijn en achtergrond en laat de regel op kleine schermen onscherp ogen. Daarom moet de gloed dicht bij de woorden zitten, nooit eromheen. Heeft tekst hulp nodig om te lezen, repareer dan het gebied erachter. [Alternatieven voor tekstschaduw](https://gradiently.design/nl/guide/text-shadow-alternatives) behandelt de schonere opties.

### Vermijd

- Een wazige halo om de kop
- Gloed in dezelfde kleur als de letters
- Meerdere gloeden van gelijke sterkte die concurreren
- Een felle gloed op een felle achtergrond
- Gloed op elke knop, kaart en icoon

### Doe

- Licht achter een product, vorm of foto
- Een gloed aan één kant, woorden over het rustige gebied
- Eén hoofdlicht en hooguit één zwakkere echo
- Een donkere of gedempte ondergrond zodat het licht ruimte heeft
- Gloed bewaard voor het ene dat ertoe doet

## Achtergronden met gloedeffect en codes

De makkelijkste gloeiende achtergrond is een radiaal kleurverloop dat helder begint, snel zakt door een rijkere middentint en uitvloeit in een bijna zwarte ondergrond. De kern van het midden wegschuiven laat het als lichtbron voelen en niet als schietschijf.

- Gloed van sintels: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Zwembadlicht: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Podiumgloed van onderen: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Limoensignaal: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)`
- Raamlicht op papier: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)`
- Violette lamp: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Vijf donkere gloeden en één lichte. De lichte versie werkt omdat de gloed warmer en helderder is dan een al bleke ondergrond, niet omdat hij sterker is.

Elk daarvan heeft drie delen: een kern die bijna wit of heel bleek is, een verzadigde middelste stop en een diepe ondergrond in dezelfde familie. Sla de middelste stop over en de gloed ziet er grijs uit waar hij het donker raakt, het probleem uit [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients). Meer over de vorm zelf lees je in [radiale kleurverlopen](https://gradiently.design/nl/guide/radial-gradient).

## Zo maak je een gloed die op echt licht lijkt

1. **Begin met een donkere of gedempte ondergrond** Licht heeft duisternis nodig om te zien. Een blauwzwart, een diep groen of een stoffige papiertint werken allemaal, een felwitte ondergrond geeft de gloed nergens heen.
2. **Geef de kern een lichtere, warmere tint** Echt licht is in het midden het helderst en het minst verzadigd. Maak de kern een bleke versie van de gloedkleur, zoals `#fde68a` voor een oranje gloed.
3. **Laat hem langzaam uitlopen** De uitloop moet over een groot gebied lopen, vaak de helft van het beeld. Een korte uitloop lijkt op een spotlight die met een schaar is uitgeknipt.
4. **Bepaal waar het licht vandaan komt** Zet de kern bij een rand of hoek, of achter het object dat hij verlicht. Houd de rest van het ontwerp dan consistent met die richting.
5. **Voeg fijne korrel toe** Lange donkere uitlopen zijn waar banding het meest opvalt. Een lichte ruislaag verbergt de stappen, [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) heeft de methode.

Nog een test: zet de gloed uit en kijk opnieuw. Werkt het ontwerp nog, dan voegt de gloed sfeer toe. Valt het uit elkaar, dan doet de gloed een klus die layout of contrast zou moeten doen.

## Gloedeffect in CSS

Er zijn drie betrouwbare manieren om een gloed op het web te maken. Een `box-shadow` zonder verschuiving en met een grote blur verlicht de randen van een kaart of knop. Een radiaal kleurverloop op een pseudo-element zet een zachte plas licht achter een object. En `filter: blur()` op een gekleurde vorm geeft het zachtste resultaat, tegen hogere renderkosten. De [MDN-naslag over box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) noemt elke waarde.

```css
/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}
```

Drie gloeden, geen op tekst. Twee of drie box-shadows van afnemende sterkte stapelen geeft een zachtere rand dan één grote schaduw.

| Methode | Het best voor | Kosten | Let op |
| --- | --- | --- | --- |
| `box-shadow` | Knoppen, kaarten, invoervelden | Laag | Afgekapt door `overflow: hidden` op een ouder |
| `radial-gradient`-laag | Licht achter afbeeldingen en secties | Laag | Banding bij lange donkere uitlopen |
| `filter: blur()`-vorm | Hero-achtergronden, sfeerorbs | Hoger, vooral bij animatie | Hertekenkosten bij scrollen, houd hem stil of klein |

Kies de goedkoopste methode die de look geeft. De meeste gloeden op een pagina horen kleurverlopen of schaduwen te zijn, geen vervaagde elementen.

Houd de gloed op knoppen subtiel en het label scherp: het licht hoort bij de vorm van de knop, niet bij zijn woorden. De volledige schaduwsyntaxis staat in [CSS box-shadow](https://gradiently.design/nl/guide/css-box-shadow).

## Gloed in posts, posters en stories

In een stilstaand ontwerp doet een gloed zijn beste werk achter het onderwerp of in de lege helft van het beeld. Zet het licht waar het oog het eerst moet landen en zet de kop dan over het donkerdere, rustigere deel van de ondergrond. Het licht leidt de lezer naar de woorden zonder ze aan te raken.

Een verticale evenementstory waarbij een felle plek in de achtergrond precies achter de kop zit en hem uitwast

Licht dat dwars door de kop loopt: het helderste gebied valt op de letters en maakt ze plat.

Dezelfde verticale evenementstory met de felle gloed van de kop weggeschoven en een rustig donker gebied achter de tekst

Dezelfde story met het licht weg van de woorden. De gloed zet nog steeds de sfeer en de letters blijven scherp.

Dit is precies wat een Gradiently-Mark zelf doet. Zijn rustigste gebied nestelt zich achter de woorden, kleuren bij de letters worden dieper of lichter en Auto-inkt kiest per regel lichte of donkere letters uit het palet van de Mark, dus er zijn geen vakken, schaduwen of halo’s toe te voegen. Je ziet het idee in [Auto-inkt](https://gradiently.design/nl/guide/auto-ink-legibility).

- Nachtondergrond: #09071a
- Indigo-uitloop: #1e1b4b
- Violet licht: #6d28d9
- Lila kern: #c4b5fd
- Warm accent: #fde68a
- Scherpe letters: #f8fafc

Een gloedpalet in vier lagen: ondergrond, uitloop, licht en kern, plus één warm accent en een letterkleur die de gloed nooit overneemt.

## Gloed, neon en lichtlekken vergeleken

Deze drie worden door elkaar gehaald. Een gloed is zacht, breed licht uit één bron. [Neonkleurverlopen](https://gradiently.design/nl/guide/neon-gradients) zijn verzadigde, elektrische kleur met een dunne heldere lijn in het hart, dichter bij lichtreclame. [Lichtlekken](https://gradiently.design/nl/guide/light-leaks) zijn warme strepen die film nabootsen en meestal vanaf een rand binnenkomen. Alle drie hebben een donkere ondergrond nodig en alle drie blijven van de letters af. Wil je dat het licht drijft en verschuift, dan zijn aurorakleurverlopen een bewegende verwant.

## FAQ

### Hoe maak ik een gloedeffect in CSS?

Gebruik een `box-shadow` zonder verschuiving en met een grote blur, zoals `0 0 24px` in een halfdoorzichtige kleur, of een radiaal kleurverloop dat achter het element naar transparant vervaagt. Voor de zachtste gloed vervaag je een gekleurde vorm met `filter: blur()`.

### Moet ik een gloed rond tekst zetten?

Nee. Een halo verzacht de letterranden en verlaagt het contrast, waardoor de woorden moeilijker leesbaar worden. Houd tekst scherp en zet de gloed achter een vorm of in de achtergrond ernaast.

### Welke achtergrond laat een gloed opvallen?

Een donkere of gedempte ondergrond in dezelfde kleurfamilie als de gloed, zoals een diep indigo achter een violet licht. Op een felwitte achtergrond heeft een gloed nergens heen.

### Waarom heeft mijn gloeiende kleurverloop banden?

Lange, donkere uitlopen hebben weinig kleurstappen om mee te werken, dus schermen tonen zichtbare banden. Voeg een fijne korrellaag toe of exporteer in hogere kwaliteit om ze te verbergen.

### Wat is het verschil tussen een gloed en een neoneffect?

Een gloed is breed, zacht licht uit één bron. Neon is verzadigde kleur met een dunne, intens heldere lijn in het midden, zoals een lichtbuis.