In dit artikel
Wat CSS Text Shadow doet
De CSS text-shadow eigenschap voegt schaduweffecten toe aan tekstkarakters. Elke schaduw wordt gedefinieerd door horizontale offset, verticale offset, vervagingsradius en kleur. Anders dan box-shadow volgt text-shadow de exacte vorm van elk karakter-glyph, waardoor effecten ontstaan die rond lettervormen wikkelen.
Je kunt meerdere schaduwen op één element stapelen door ze te scheiden met komma's. Dit maakt complexe effecten mogelijk zoals neongloed, reliëfletters, 3D-extrusies en vuurtekst — allemaal met pure CSS, zonder afbeeldingen of canvas.
De Text Shadow Generator gebruiken
De generator biedt intuïtieve bediening voor het maken van tekstschaduwen zonder CSS-syntax uit het hoofd te kennen. Je kunt elke parameter in real-time aanpassen en het resultaat direct zien.
- Offset-regelaars — sleep schuifregelaars of voer exacte pixelwaarden in voor horizontale (X) en verticale (Y) offset om de schaduw ten opzichte van de tekst te positioneren
- Vervagingsradius — verhoog de vervaging voor zachte, gloeiende effecten of houd deze op nul voor scherpe schaduwen die eruitzien als solide duplicaten
- Meerdere lagen — voeg meerdere schaduwlagen toe en herorden ze om complexe samengestelde effecten te creëren zoals contouren, gloed en diepte
Probeer gratis — geen aanmelding vereist
Genereer Text Shadow CSS →Creatieve teksteffecten met text shadow
Tekstschaduwen zijn niet alleen voor subtiele diepte-effecten. Door meerdere schaduwlagen te combineren met verschillende offsets, vervagingswaarden en kleuren kun je opvallende visuele effecten creëren volledig in CSS.
- Neongloed — gebruik nul offset met grote vervagingsradius en een felle kleur (cyaan, magenta, limoen) herhaald in meerdere lagen met toenemende vervaging om een neonbuisgloed te simuleren
- Reliëf en letterpress — combineer een lichte schaduw iets naar rechtsonder met een donkere schaduw iets naar linksboven op een middelgrijze achtergrond voor een in-metaal-gedrukt effect
- 3D-extrusie — stapel veel schaduwen met oplopende offsets (1px 1px, 2px 2px, 3px 3px...) in geleidelijk donkerdere kleuren voor een solide driedimensionaal teksteffect
Veelgestelde vragen
Beïnvloedt text-shadow de prestaties?
Enkele schaduwen hebben een verwaarloosbare prestatie-impact. Echter, het stapelen van veel schaduwen met grote vervagingsradii kan rendering-vertragingen veroorzaken, vooral op mobiele apparaten. Test complexe effecten op doelapparaten.
Welke browsers ondersteunen text-shadow?
Text-shadow heeft uitstekende browserondersteuning in alle moderne browsers, waaronder Chrome, Firefox, Safari, Edge en mobiele browsers. Het wordt ondersteund sinds IE10 en kan veilig worden gebruikt zonder fallbacks.
Kan text-shadow worden geanimeerd met CSS-transities?
Ja. Text-shadow is volledig animeerbaar met CSS-transities en keyframe-animaties. Je kunt soepel overgaan tussen verschillende schaduwtoestanden voor hover-effecten en animaties.