Generador d'ombra de text (text-shadow)

Escriu el teu text, ajusta l'ombra amb els controls i copia el codi text-shadow. Combinant diverses capes pots aconseguir efectes de neó, lletres en 3D, contorns o text en relleu.

Ombra de text

Hola món

Exemples:

Capes d'ombra

px
px
px

Com funciona text-shadow

text-shadow rep el desplaçament horitzontal i vertical, el desenfocament i el color de l'ombra: per exemple, 2px 2px 4px rgba(0, 0, 0, 0.4). A diferència de box-shadow, no té extensió ni inset, i segueix la forma de cada lletra.

Com a box-shadow, es poden encadenar diverses ombres separades per comes; la primera queda a sobre. Així s'aconsegueixen els efectes dels exemples: el neó apila ombres sense desplaçament i cada cop més difuses, el 3D suma ombres nítides desplaçades píxel a píxel i el contorn col·loca quatre ombres nítides al voltant de la lletra.

Llegibilitat

Una ombra suau ajuda a llegir un text sobre una foto, però les ombres fortes en paràgrafs llargs cansen la vista. Fes-les servir en titulars i botons, i comprova sempre el contrast del text amb el fons.