Tekstschaduwgenerator (text-shadow)

Typ je tekst, stel de schaduw in met de schuifregelaars en kopieer de text-shadow-code. Door meerdere lagen te combineren maak je neoneffecten, 3D-letters, omtrekken of tekst in reliëf.

Tekstschaduw

Hallo wereld

Voorbeelden:

Schaduwlagen

px
px
px

Zo werkt text-shadow

text-shadow krijgt de horizontale en verticale verschuiving, de vervaging en de kleur van de schaduw, bijvoorbeeld 2px 2px 4px rgba(0, 0, 0, 0.4). Anders dan box-shadow is er geen spreiding en geen inset, en volgt de schaduw de vorm van elke letter.

Net als bij box-shadow kun je meerdere schaduwen combineren, gescheiden door komma's; de eerste ligt bovenop. Zo werken de voorbeelden: neon stapelt schaduwen zonder verschuiving met steeds meer vervaging, 3D telt scherpe schaduwen op die pixel voor pixel verschoven zijn, en omtrek plaatst vier scherpe schaduwen rond de letter.

Leesbaarheid

Een zachte schaduw helpt om tekst op een foto te lezen, maar sterke schaduwen in lange alinea's vermoeien de ogen. Gebruik ze voor koppen en knoppen, en controleer altijd het contrast tussen tekst en achtergrond.