Herramientas CSS/Generador de Text Shadow
Generador de Text Shadow
Crea impresionantes sombras de texto con múltiples capas y vista previa en tiempo real
Vista Previa
Sample Text
48px
#1E293B
#F8FAFC
Capas de Sombra
Capa 1
#00000040
2px
2px
4px
Presets
Código CSS
Loading...Guía de Sombra de Texto
Crea efectos de texto impresionantes con sombras CSS
¿Qué es Text Shadow?
CSS text-shadow añade efectos de sombra al texto. Se puede usar para crear profundidad, mejorar legibilidad o crear efectos decorativos como brillo o texto 3D.
Cómo Usar
- Ajusta el desplazamiento horizontal y vertical
- Configura el radio de desenfoque para bordes suaves
- Elige el color de la sombra
- Añade múltiples sombras para efectos complejos
Consejos Pro
- Múltiples sombras pueden crear efectos de brillo o contorno
- Para legibilidad, usa colores de sombra sutiles
- Combina con fuentes web para máximo impacto
Soporte del Navegador
Text-shadow es totalmente compatible en todos los navegadores modernos. No requiere prefijos.
Preguntas frecuentes
¿Cuál es la diferencia entre text-shadow y box-shadow?
text-shadow solo se aplica a texto, siguiendo la forma de cada carácter. box-shadow se aplica a toda la caja del elemento. text-shadow no tiene valor de propagación y funciona bien para efectos de brillo, contorno y legibilidad del texto.
¿Cómo creo un efecto de brillo neón?
Para brillo neón, usa múltiples sombras con el mismo color que el texto. Por ejemplo: text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 40px #0ff; Cuantas más capas con valores de desenfoque crecientes, más intenso será el brillo.
¿Puedo crear un contorno de texto con text-shadow?
Para contornos, usa múltiples sombras en cada dirección. Por ejemplo: text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; establece sombras de 1px en las cuatro direcciones creando un efecto de contorno.
¿Cómo creo un efecto de texto 3D?
Apila múltiples sombras con desplazamientos incrementales. Por ejemplo: text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb, 4px 4px 0 #b9b9b9; crea un efecto 3D donde cada capa representa profundidad.
¿Afecta text-shadow al rendimiento?
Text-shadow es generalmente liviano, pero muchas sombras con valores grandes de desenfoque pueden afectar el rendimiento. Especialmente al animar sombras o aplicarlas a mucho texto, se necesita precaución. Para mejor rendimiento, usa valores mínimos de desenfoque y un número razonable de capas de sombra.