CodeKitHubWat is deze tool?
Deze tool stapelt meerdere vervaagde text-shadow-waarden in de door jou gekozen gloeikleur, met toenemende vervagingsstraal, om de zachte gloed van een neonbord na te bootsen.
Pas de intensiteitsschuif aan om te bepalen hoeveel gloeilagen worden gestapeld, van een subtiele gloed tot een sterk, helder effect.
Een live voorbeeldweergave op een donkere achtergrond werkt direct bij terwijl je typt of een instelling aanpast, zodat je de gloed kunt verfijnen voordat je de CSS kopieert.
Waarom gebruiken?
- Je bouwt een landingspagina voor een nachtclub- of café-evenement en een vlakke gekleurde kop verkoopt de sfeer niet — een neongloed op de titel signaleert "nachtleven" zodra de pagina laadt, voordat een bezoeker een woord tekst leest.
- Je vormgeeft een portfoliosite rond een synthwave- of cyberpunk-esthetiek en de hero-tekst moet echt gloeien, niet gewoon roze tekst op een donkere achtergrond lijken — de gelaagde text-shadow verkoopt de illusie.
- Je bouwt een "OPEN"- of "WELKOM"-badge voor een virtuele winkel en wilt dat die eruitziet als een echt neonbord in plaats van een vlak SVG-icoon, omdat de gloeilagen reageren op echte CSS in plaats van een statische afbeelding.
- Je wilt een strakke, subtiele gloed vergelijken met een uitbundige gloed op maximale intensiteit voordat je beslist wat bij je merk past — de intensiteitsinstelling verschuiven laat je beide zien zonder de shadow-waarden zelf te schrijven.
- 100% lokaal: de CSS wordt volledig in je browser gegenereerd, er wordt niets naar een server verstuurd.
Hoe te gebruiken
- Typ de tekst die je wilt laten gloeien.
- Kies een gloeikleur en een achtergrondkleur die bij je ontwerp past.
- Pas de intensiteitsschuif aan om te bepalen hoe sterk het gloeieffect eruitziet.
- Klik op "Kopieer" om de gegenereerde CSS-code te kopiëren en plak deze in je stylesheet.
Voorbeeld
Invoer
Tekst: "NEON", Gloeikleur: roze, Intensiteit: 3Uitvoer
color: #ffffff;
background: #0a0a12;
text-shadow: 0 0 2px #ff2ec4, 0 0 4px #ff2ec4, 0 0 8px #ff2ec4, 0 0 16px #ff2ec4;De gegenereerde CSS stelt witte tekst in op een donkere achtergrond met meerdere gestapelde, vervaagde text-shadow-lagen in de gekozen gloeikleur.
Hoe het neongloeieffect werkt
De gloed is opgebouwd uit meerdere text-shadow-lagen in dezelfde kleur, elk met een grotere vervagingsstraal dan de vorige.
| Laag | Vervagingsstraal | Effect |
|---|---|---|
| 1e | 2px | Strakke binnenste gloed dicht bij de letters |
| 2e | 4px | Iets bredere gloed |
| 3e | 8px | Zachte middelste gloed |
| 4e | 16px | Brede buitenste gloed |
| 5e | 24px | Brede omgevingsgloed bij maximale intensiteit |
Gerelateerde tools
Meer CSS-teksteffectgenerators vind je hier.
→ CSS Reliëf Tekst Generator · Box Shadow Generator · CSS Glassmorphism Generator
De juiste gloeikleur kiezen voor de juiste sfeer
- Roze en magenta gloed leest als klassiek jaren 80 retro of synthwave — de meest gebruikte keuze voor nachtleven- en arcade-getinte ontwerpen.
- Cyaan en blauwe gloed leunt meer futuristisch of technologiegericht, vaak gebruikt in cyberpunk- en sci-fi UI-mockups.
- Groene gloed roept een hacker- of terminal-esthetiek op, vooral in combinatie met een monospace-lettertype.
- Warme amber- of oranje gloed voelt dichter bij een traditioneel neon café-bord dan de koelere synthwave-kleuren, handig voor restaurant- of café-branding die een vintage gevoel wil in plaats van een futuristisch.
Veelgestelde vragen
Waarom moet de tekst wit zijn om de gloed er goed uit te laten zien?
Neongloed werkt het beste met een heldere, bijna-witte tekstkleur, omdat de gekleurde gloed volledig uit de text-shadow-lagen komt — een donkere of verzadigde tekstkleur zou concurreren met de gloed in plaats van hem te laten opvallen.
Waarom heeft het effect een donkere achtergrond nodig?
Net als bij echte neonborden is het gloeieffect veel zichtbaarder tegen een donkere achtergrond. Op een lichte achtergrond wordt de gloed vaak uitgewassen en moeilijk te zien.
Wat verandert de intensiteitsschuif precies?
Hij bepaalt hoeveel vervaagde text-shadow-lagen worden gestapeld, van één strakke gloed bij lage intensiteit tot vijf gelaagde gloeien met een bredere spreiding bij maximale intensiteit.
Bewaart of volgt deze tool wat ik typ?
Nee. De CSS wordt volledig in je browser gegenereerd — er wordt niets naar een server gestuurd of daar opgeslagen.
Werkt dit in alle browsers?
Ja — text-shadow met meerdere komma-gescheiden waarden wordt uitstekend ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge.
Kan ik de gloed laten flikkeren zoals een echt neonbord?
De gegenereerde CSS is een statische gloed, maar je kunt hem zelf uitbreiden met een CSS @keyframes-animatie die de dekking of intensiteit van de text-shadow tussen twee toestanden wisselt — de tool geeft je de basisgloedwaarden om vanuit te animeren.
Ziet de gloed er nog goed uit op een lichte of witte achtergrond?
Nee — het effect hangt sterk af van contrast tegen een donkere achtergrond, daarom bevat de tool een achtergrondkleurveld naast het tekstkleurveld. Als je dezelfde titel op een licht gedeelte van je pagina nodig hebt, houd hem daar dan gewoon en bewaar de neonversie voor een donker gedeelte of kaart.
Beïnvloedt dit de paginaprestaties als ik het op veel tekst gebruik?
Text-shadow is een relatief lichte CSS-eigenschap, dus een handvol gloeiende koppen heeft geen merkbaar effect op de prestaties. Vijf gestapelde shadow-lagen toepassen op een groot blok body-tekst wordt echter niet aangeraden voor de leesbaarheid, ongeacht de prestaties.
Kan ik een andere gloeikleur gebruiken voor elk woord in een kop?
De tool genereert één gloeikleur per generatie, maar je kunt verschillende woorden in aparte <span>-tags plaatsen met hun eigen text-shadow-waarde (genereer één kleur, kopieer de CSS, herhaal voor de tweede kleur) om een meerkleurig gloeieffect te krijgen.
Werkt de gegenereerde CSS hetzelfde bij een lichte/donkere modus-schakelaar?
Het neoneffect is van nature ontworpen rond een donkere achtergrond, dus als je site een licht/donker-schakelaar ondersteunt, is het het beste om de gloeistyling alleen toe te passen binnen je dark-mode CSS in plaats van te proberen hem op beide thema's te laten werken.