Maak gelaagde CSS-tekstschaduwen met een live voorbeeld. Begin met een voorinstelling voor neon, 3D, long shadow, letterpress of outline en kopieer daarna de CSS of een Tailwind-klasse.
CSS text-shadow generator
De CSS-eigenschap text-shadow neemt een x-verschuiving, een y-verschuiving, een optionele blurradius en een kleur, bijvoorbeeld text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Scheid meerdere schaduwen met komma's om ze te stapelen, zo maakt u neongloed en 3D-letters. Bouw er hieronder een en kopieer de CSS of Tailwind-klasse.
De vier waarden van één schaduw
Waarde
Voorbeeld
Effect
x-verschuiving
Verschuift de schaduw naar rechts (negatief: links)
y-verschuiving
Verschuift de schaduw omlaag (negatief: omhoog)
blurradius
Verzacht de rand; 0 geeft een scherpe kopie
rgb(0 0 0 / 0.25)
Elke CSS-kleur; standaard de tekstkleur
Stapel zoveel lagen als u wilt, wijzig de tekst, lettergrootte en kleuren, en zie het voorbeeld meteen bijwerken. De uitvoer is gewone CSS die in elke actuele browser werkt, plus een Tailwind-klasse voor projecten die daarmee werken.
Kies een voorinstelling of begin met één zachte schaduw.
Pas per laag de verschuivingen, blur, kleur en dekking aan, of voeg lagen toe en verwijder ze. Lagen die bovenaan staan, worden bovenop getekend.
Wijzig de voorbeeldtekst, grootte, dikte en kleuren zodat ze bij uw ontwerp passen.
Kopieer de CSS-declaratie of de Tailwind-klasse met arbitrary property.
Schaduwen tellen niet mee bij contrastcontroles. Zorg dat de tekst zonder schaduw voldoende contrast heeft met de achtergrond en voeg de schaduw pas als afwerking toe.
Voor witte tekst op een drukke foto helpt een zachte donkere schaduw de leesbaarheid meer dan een harde. Combineer hem met een donkere overlay op de afbeelding voor echte leesbaarheid.
Grote blurradii op veel lagen kosten tekentijd, en ze animeren kost nog meer. Houd zware gloedeffecten voor koppen, niet voor lopende tekst.
Een lichte schaduw van 1px onder grijze tekst op een grijze achtergrond geeft het ingedrukte letterpress-effect; draai de verschuiving om voor verhoogde tekst.
Veelgestelde vragen
Hoe maak ik neontekst in CSS?
Gebruik lichte tekst met meerdere schaduwen in dezelfde felle kleur zonder verschuiving en met oplopende blur: een strakke witte gloed, daarna gloed van 12px, 24px en 48px in de accentkleur. Zet het op een donkere achtergrond. De voorinstelling Neon is een goed beginpunt.
Ondersteunt text-shadow spread zoals box-shadow?
Nee. text-shadow heeft geen spread-waarde en geen inset-sleutelwoord. Om een dikkere omlijning na te bootsen, stapelt u meerdere harde schaduwen die één pixel in elke richting zijn verschoven, zoals de voorinstelling Outline doet, of gebruikt u -webkit-text-stroke.
Hoe voeg ik een tekstschaduw toe in Tailwind?
Tailwind 4.1 en nieuwer bevat text-shadow-utilities zoals text-shadow-sm en text-shadow-lg. Voor een eigen schaduw in elke versie gebruikt u een arbitrary property zoals [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], waarbij underscores voor spaties staan. De generator schrijft die klasse voor u.
Waarom ziet mijn schaduw er in Safari anders uit?
Browsers rasteren blur net iets anders, waardoor grote blur per engine zachter of sterker kan lijken. Harde schaduwen zonder blur zien er overal hetzelfde uit.
Hoe stapelen werkt
Elke schaduw, gescheiden door komma's, wordt achter de tekst getekend, en de eerste in de lijst komt bovenop de andere te liggen. Die volgorde is belangrijk voor 3D-effecten: zet de dichtstbijzijnde, lichtste laag eerst en de verste, donkerste laatst.
Long shadows zijn gewoon veel identieke lagen die telkens één pixel verspringen. Ze maken indruk in een grote kop, maar elke laag is een extra tekenbewerking, dus houd het aantal stappen beperkt.
Toegankelijkheid en beweging
Schaduwen kunnen kleine tekst vervagen en moeilijker leesbaar maken voor slechtzienden. Bewaar decoratieve effecten voor grote koppen en houd lopende tekst scherp.
Animeert u een gloed, zet de animatie dan binnen een prefers-reduced-motion-controle, zodat mensen die om minder beweging hebben gevraagd een stilstaande versie krijgen.