CSS Text Shadow: Effecten, Neon en Typografische Trucs

CSS text-shadow voegt diepte, gloed en dimensie toe aan typografie. In tegenstelling tot box-shadow volgt text-shadow de vorm van individuele tekens.

Meerdere gestapelde schaduwen creëren de meest indrukwekkende text-shadow effecten.

text-shadow syntaxis

De text-shadow syntaxis is: text-shadow: offset-x offset-y blur-radius color. In tegenstelling tot box-shadow is er geen spread-radius en geen inset-sleutelwoord.

Meervoudige tekstschaduwen

Meerdere text-shadow waarden creëren rijke typografische effecten. Techniek voor diepte: drie schaduwen met dezelfde kleur maar verschillende vervagingswaarden.

Neon gloedeffect

Neontekst gebruikt gestapelde schaduwen met toenemende vervaging. Typisch recept: eerste schaduw 0 0 7px met de gloedkleur, tweede 0 0 10px, derde 0 0 21px, vierde 0 0 42px.

Emboss- en debosseffecten

Embosseffect (verheven tekst): twee schaduwen — donkere schaduw onder en rechts, lichte schaduw boven en links. Deboss: draai de schaduwposities om.

Leesbare tekst op afbeeldingen

text-shadow met hoge vervaging en donkere kleur creëert een zachte halo: text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6).

Creatieve typografische voorbeelden

3D-tekst: stapel 10-20 identieke schaduwen verschoven met 1px in dezelfde richting. Retro druk: harde schaduw verschoven met 1-2px in een contrastkleur.

Veelgestelde Vragen