Generador de Sombras de Texto CSS
Genera valores de text-shadow visualmente. Configura el desplazamiento, desenfoque y color de cada sombra; añade múltiples sombras y copia el CSS al instante.
Preview
Shadows
CSS
text-shadow: 0px 2px 4px #00000040; Predeterminados
Tabla de contenidos
¿Qué es text-shadow?
text-shadow es una propiedad CSS que dibuja una o más sombras detrás del texto. Configuras el desplazamiento horizontal y vertical, el radio de desenfoque y el color. A diferencia de box-shadow, text-shadow no tiene dispersión ni interior — solo desplazamiento, desenfoque y color. Las sombras múltiples se separan con comas.
Sintaxis
text-shadow: offset-x offset-y blur-radius color; Sombras múltiples: text-shadow: shadow1, shadow2, ...; Los desplazamientos y el desenfoque están en px. El color puede ser hex, rgb o rgba; usa transparencia para sombras más suaves.
Casos de uso
- Encabezados y títulos — Sombra suave para profundidad o legibilidad en fondos complejos.
- Efecto de contorno — Pequeño desplazamiento sin desenfoque para sugerir un contorno.
- Resplandor — Desplazamiento cero con gran desenfoque y color semitransparente.
- Profundidad en capas — Múltiples sombras para una sombra más realista.
Preguntas frecuentes
text-shadow se aplica solo al texto y no tiene dispersión ni interior — solo offset-x, offset-y, blur y color. box-shadow se aplica a la caja del elemento y admite dispersión e interior.
Sí. Añade más sombras con "Añadir sombra". Se apilan en orden; la primera está encima. Usa múltiples sombras para profundidad en capas o para combinar contorno y resplandor.