En este artículo
Qué hace CSS Text Shadow
La propiedad CSS text-shadow añade efectos de sombra a los caracteres de texto. Cada sombra se define por desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y color. A diferencia de box-shadow, text-shadow sigue la forma exacta de cada glifo de carácter, creando efectos que envuelven las formas de las letras.
Puedes apilar múltiples sombras en un solo elemento separándolas con comas. Esto permite efectos complejos como brillos neón, letras en relieve, extrusiones 3D y texto de fuego — todo con CSS puro, sin imágenes ni canvas necesarios.
Usando el generador de sombra de texto
El generador proporciona controles intuitivos para crear sombras de texto sin memorizar la sintaxis CSS. Puedes ajustar cada parámetro en tiempo real y ver el resultado al instante.
- Controles de desplazamiento — arrastra los deslizadores o introduce valores exactos en píxeles para el desplazamiento horizontal (X) y vertical (Y) para posicionar la sombra respecto al texto
- Radio de desenfoque — aumenta el desenfoque para efectos suaves y brillantes o mantenlo en cero para sombras nítidas que parecen duplicados sólidos
- Capas múltiples — añade múltiples capas de sombra y reordénalas para crear efectos compuestos complejos como contornos, brillos y profundidad
Pruébalo gratis — sin registro
Generar CSS Text Shadow →Efectos de texto creativos con text shadow
Las sombras de texto no son solo para efectos sutiles de profundidad. Combinando múltiples capas de sombra con diferentes desplazamientos, valores de desenfoque y colores, puedes crear efectos visuales impactantes completamente en CSS.
- Brillo neón — usa desplazamiento cero con gran radio de desenfoque y un color brillante (cian, magenta, lima) repetido en múltiples capas con desenfoque creciente para simular un brillo de tubo neón
- Relieve y letterpress — combina una sombra clara ligeramente desplazada abajo-derecha con una sombra oscura ligeramente desplazada arriba-izquierda sobre fondo gris medio para un efecto de prensado en metal
- Extrusión 3D — apila muchas sombras con desplazamientos incrementales (1px 1px, 2px 2px, 3px 3px...) en colores gradualmente más oscuros para un efecto de texto tridimensional sólido
Preguntas frecuentes
¿Afecta text-shadow al rendimiento?
Las sombras simples tienen un impacto de rendimiento insignificante. Sin embargo, apilar muchas sombras con grandes radios de desenfoque puede causar ralentizaciones de renderizado, especialmente en dispositivos móviles. Prueba los efectos complejos en los dispositivos objetivo.
¿Qué navegadores soportan text-shadow?
Text-shadow tiene excelente soporte en todos los navegadores modernos, incluyendo Chrome, Firefox, Safari, Edge y navegadores móviles. Ha sido soportado desde IE10 y es seguro usarlo sin fallbacks.
¿Se puede animar text-shadow con transiciones CSS?
Sí. Text-shadow es completamente animable con transiciones CSS y animaciones keyframe. Puedes hacer transiciones suaves entre diferentes estados de sombra para efectos hover y animaciones.