Generador de sombra de texto (text-shadow)

Escribe tu texto, ajusta la sombra con los controles y copia el código text-shadow. Combinando varias capas puedes conseguir efectos de neón, letras en 3D, contornos o texto en relieve.

Cómo funciona text-shadow

text-shadow recibe el desplazamiento horizontal y vertical, el desenfoque y el color de la sombra: por ejemplo, 2px 2px 4px rgba(0, 0, 0, 0.4). A diferencia de box-shadow, no tiene extensión ni inset, y sigue la forma de cada letra.

Como en box-shadow, se pueden encadenar varias sombras separadas por comas; la primera queda encima. Así se consiguen los efectos de los ejemplos: el neón apila sombras sin desplazamiento y cada vez más difusas, el 3D suma sombras nítidas desplazadas de píxel en píxel y el contorno coloca cuatro sombras nítidas alrededor de la letra.

Legibilidad

Una sombra suave ayuda a leer un texto sobre una foto, pero las sombras fuertes en párrafos largos cansan la vista. Úsalas en titulares y botones, y comprueba siempre el contraste del texto con el fondo.