Gloedeffect in ontwerp: zacht licht zonder halo om tekst

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 behandelt de schonere opties.

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.

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. Meer over de vorm zelf lees je in radiale kleurverlopen.

Zo maak je een gloed die op echt licht lijkt

1. 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. 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. 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. 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. 5

   Voeg fijne korrel toe

   Lange donkere uitlopen zijn waar banding het meest opvalt. Een lichte ruislaag verbergt de stappen, korrelige kleurverlopen 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 noemt elke waarde.

/* 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;
}

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.

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.

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.

Gloed, neon en lichtlekken vergeleken

Deze drie worden door elkaar gehaald. Een gloed is zacht, breed licht uit één bron. Neonkleurverlopen zijn verzadigde, elektrische kleur met een dunne heldere lijn in het hart, dichter bij lichtreclame. Lichtlekken 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.