CSS Text Shadow: Efectos, Neón y Trucos Tipográficos
Domina la sintaxis text-shadow, el resplandor neón, los efectos de relieve y el texto legible en imágenes.
CSS text-shadow añade profundidad, resplandor y dimensión a la tipografía. A diferencia de box-shadow, text-shadow sigue la forma de los caracteres individuales.
Múltiples sombras superpuestas crean los efectos text-shadow más impresionantes.
Sintaxis text-shadow
La sintaxis text-shadow es: text-shadow: offset-x offset-y blur-radius color. A diferencia de box-shadow, no hay spread-radius ni palabra clave inset. Múltiples sombras se separan con comas.
Herramienta gratuita Generador de Text Shadow Crea efectos de brillo neón, relieve y sombras de texto creativasSombras de texto múltiples
Múltiples valores text-shadow crean efectos tipográficos ricos. Técnica para profundidad: tres sombras con el mismo color pero diferentes valores de desenfoque.
Efecto de resplandor neón
El texto neón usa sombras superpuestas con desenfoque creciente. Receta típica: primera sombra 0 0 7px con el color de resplandor, segunda 0 0 10px, tercera 0 0 21px, cuarta 0 0 42px.
Herramienta gratuita Generador de Gradiente de Texto Crea efectos de texto con gradiente colorido con CSSEfectos emboss y deboss
Efecto emboss (texto en relieve): dos sombras — sombra oscura abajo a la derecha, sombra clara arriba a la izquierda. Deboss: invertir las posiciones de las sombras.
Texto legible en imágenes
text-shadow con alto desenfoque y color oscuro crea un halo suave: text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6).
Ejemplos tipográficos creativos
Texto 3D: superponer 10-20 sombras idénticas desplazadas 1px en la misma dirección. Impresión retro: sombra dura desplazada 1-2px en color contrastante.
Herramienta gratuita Generador de Escala Tipográfica Genera una escala tipográfica armoniosa para tu sistema de diseño