Text Shadow-generator
De CSS text shadow generator stelt offset, blur, kleur en dekking van text-shadow in met een live preview en laat je meerdere schaduwlagen stapelen voor glow-, outline- en 3D-teksteffecten.
Over deze tool
De CSS text shadow generator stelt offset, blur, kleur en dekking van text-shadow in met een live preview en laat je meerdere schaduwlagen stapelen voor glow-, outline- en 3D-teksteffecten.
Zo gebruik je het
- Pas de horizontale en verticale offset en de blur aan.
- Kies de schaduwkleur en dekking, plus tekstkleur en -grootte.
- Klik op Add Layer om nog een schaduw te stapelen; Reset Layers begint opnieuw.
- Klik op Copy CSS.
Goed om te weten
- De syntax van text-shadow is: offset-x offset-y blur-radius color.
- Anders dan box-shadow heeft text-shadow geen spread-waarde of inset-keyword.
- Meerdere schaduwen worden gescheiden door komma's, waarbij de eerste bovenop wordt getekend.
- Een schaduw zonder offset met blur geeft een glow-effect.
- Door meerdere offsets van 1 px te stapelen, krijg je een 3D- of letterpress-look.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe geef ik tekst een schaduw in CSS?
Gebruik text-shadow, bijvoorbeeld text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Hoe maak ik gloeiende tekst?
Gebruik offsets van nul met een blur en een felle kleur, bijvoorbeeld text-shadow: 0 0 8px #1db954; stapel lagen voor een sterkere glow.
Kan ik meer dan één text shadow gebruiken?
Ja. Scheid schaduwen met komma's; deze tool voegt elke laag voor je toe.
Heeft text-shadow invloed op de leesbaarheid?
Subtiele schaduwen kunnen de leesbaarheid op afbeeldingen verbeteren, maar zware schaduwen maken tekst minder helder. Controleer het contrast met een contrast checker.