Generador de Text Shadow
El generador de text-shadow CSS ajusta el desplazamiento, el desenfoque, el color y la opacidad de la sombra con vista previa en vivo, y te permite apilar varias capas para efectos de brillo, contorno y texto 3D.
Acerca de esta herramienta
El generador de text-shadow CSS ajusta el desplazamiento, el desenfoque, el color y la opacidad de la sombra con vista previa en vivo, y te permite apilar varias capas para efectos de brillo, contorno y texto 3D.
Cómo se usa
- Ajusta el desplazamiento horizontal y vertical y el desenfoque.
- Elige el color y la opacidad de la sombra, además del color y el tamaño del texto.
- Haz clic en Añadir capa para apilar otra sombra; Restablecer capas vuelve a empezar.
- Haz clic en Copiar CSS.
Datos útiles
- La sintaxis de text-shadow es: offset-x offset-y blur-radius color.
- A diferencia de box-shadow, text-shadow no tiene valor de spread ni la palabra clave inset.
- Las sombras múltiples se separan con comas y se pintan con la primera por encima.
- Una sombra sin desplazamiento y con desenfoque crea un efecto de brillo.
- Apilar varios desplazamientos de 1 px crea un aspecto 3D o de letterpress.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo añado sombra al texto en CSS?
Usa text-shadow, por ejemplo text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
¿Cómo hago texto brillante?
Usa desplazamientos en cero con desenfoque y un color vivo, por ejemplo text-shadow: 0 0 8px #1db954; apila capas para un brillo más intenso.
¿Puedo usar más de una sombra de texto?
Sí. Separa las sombras con comas; esta herramienta añade cada capa por ti.
¿text-shadow afecta a la legibilidad?
Las sombras sutiles pueden mejorar la legibilidad sobre imágenes, pero las sombras intensas restan nitidez; comprueba el contraste con un verificador de contraste.