Een tekstschaduw is dezelfde lagenlijst als een box-shadow, zonder spread en inset. Neon, outline, letterpress en retro 3D zijn allemaal die kortere grammatica, een paar keer achter elkaar gebruikt.

Hoe elke preset is opgebouwd

Neon is één kleur op vier breedtes geblurd met alle verschuivingen op nul, en dat is wat een gloed van een schaduw scheidt. Retro 3D en Lange schaduw zijn stappen van 1px langs de diagonaal, één laag per stap, elke stap volledig dekkend: doorschijnende stappen overlappen en geven banden in plaats van een menging. Reliëf is één lichte laag 1px omlaag en één donkere 1px omhoog, dus die vraagt een achtergrond in een middentoon met ruimte voor allebei.

Contour is vier harde verschuivingen van 1px op de diagonalen, en je herkent het aan vierkante hoeken waar een echte stroke ze zou afronden. Gebruik in plaats daarvan -webkit-text-stroke met paint-order: stroke fill, zodat de stroke achter de vulling tekent in plaats van de letter van binnenuit half op te eten.

De contrastval

Een schaduw verandert waartegen je tekst gelezen wordt. Contrast is normaal tekst tegen achtergrond, maar een schaduw tekent een halo rond de rand van elke letter, en van die halo moet de lettervorm zich losmaken. Een cyaan gloed achter witte tekst op zwart laat het paginacontrast rond 20:1 terwijl de letterrand onder 2:1 zit.

De controle stelt elke laag op zijn eigen alpha over de achtergrond samen en meet de tekst tegen het resultaat. WCAG 2.2 vraagt 4,5:1 voor gewone tekst en 3:1 voor grote, wat 18pt (24px) of 14pt vet betekent. WCAG heeft geen regel voor schaduwen, dus dit is een interpretatie en geen conformiteitsoordeel, en het waarschuwt vroeg: een zwaar geblurde laag haalt in de praktijk nooit volle alpha, dus een brede zachte gloed meet hier dekkender dan hij tekent. Verschuivingen blijven ook buiten de meting, dus een laag die ruim van de letter af geworpen is wordt nog steeds genoemd als de controle een laag aanwijst.

Veelvoorkomende problemen

Het effect verdwijnt op tekstgrootte. Verschuivingen zijn absolute lengtes, dus een verschuiving van 4px die op een kop van 64px als diepte leest, is een veeg op lopende tekst van 16px. Schaal de verschuivingen mee met de letter, of houd het effect op koppen.
Een snippet van elders heeft geen kleur. De kleur is optioneel; zonder tekenen browsers in currentColor, dus de schaduw volgt de tekstkleur.
De schaduw kwam boven op de letter terecht. Lagen tekenen van voor naar achter in de volgorde waarin ze staan. In een 3D-effect met stappen lopen de stappen naar buiten weg van de letter, de dichtstbijzijnde eerst.

Veelgestelde vragen

Waarom heeft text-shadow geen spread terwijl box-shadow die wel heeft?

Een box is een rechthoek waarvan de omtrek triviaal op te rekken is. Een letteromtrek niet: die correct laten groeien is wat een fontstroke doet, en dat kost veel meer. De property neemt dus drie lengtes en geen vier, en heeft ook geen inset.

Kan ik dit gebruiken voor een omlijning in plaats van een stroke?

Op 1px wel. Voorbij ongeveer 2px laat de truc met vier verschuivingen gaten zien op de diagonalen en zijn er acht of meer lagen nodig om ze te dichten, terwijl -webkit-text-stroke goedkoper en juister is.

Werkt de Tailwind-klasse in elke versie van Tailwind v4?

text-shadow-* kwam in v4.1. Gebruik op alles daarvoor de vorm met een arbitraire property, die sinds v3.1 werkt. In allebei staan underscores voor spaties.

Schaadt een tekstschaduw de leesbaarheid?

Dat kan, en flink, en daarom meet deze pagina het. Een schaduw tekent een halo direct rond elke letter, dus de letterrand wordt tegen die halo gelezen in plaats van tegen de pagina. Een zware gloed kan het effectieve contrast onder de drempels van WCAG AA duwen terwijl de tekst er voor wie hem toevoegde nog prima uitziet.