Generador Text Shadow CSS Gratis: Sombra de Texto Visual Online
19 usos2px
2px
4px
50%
Hello World
Consejos Text Shadow
Sombra de texto visual
Ajusta X/Y offset, blur y color para crear el efecto de sombra perfecto. Vista previa en tiempo real.
Código CSS listo
text-shadow se genera automáticamente. Copia y pega en tu CSS.
Color y difusión
Elige cualquier color con opacidad ajustable. Mayor blur = sombra más difusa y suave.
Preguntas frecuentes
¿Cómo funciona text-shadow?
text-shadow: X Y blur color. X e Y son el desplazamiento, blur es la difusión y color es el color de la sombra.
¿Se pueden aplicar múltiples sombras?
Sí en CSS, separando cada sombra con coma. Esta herramienta genera una sombra individual.
¿Para qué se usa?
Títulos con profundidad, texto legible sobre imágenes, efectos de neón y estilo retro.
¿Creará esta herramienta sombras que parezcan pixeladas o borrosas en diferentes resoluciones de pantalla?
No, no lo hará. El generador crea propiedades CSS `text-shadow` estándar. Estas son vectoriales y escalan con tu texto. Obtendrás sombras nítidas en pantallas de alta resolución y estándar en otros lugares. Solo asegúrate de que tu tamaño de fuente base esté configurado apropiadamente.
¿Importa el orden de los valores de sombra?
Sí, absolutamente. CSS lee los valores de text-shadow en una secuencia estricta: desplazamiento X, desplazamiento Y, radio de desenfoque y luego color. Si los mezclas, la sombra se rompe o se comporta de manera inesperada. Por ejemplo, '2px 2px 4px #000' funciona bien, pero '2px 4px #000 2px' no se renderizará correctamente. El generador aplica este orden automáticamente, así que puedes copiar el código sin dudar.
Cómo Usar
- Escribe texto de vista previa
- Ajusta X, Y offset y blur
- Elige color de la sombra
- Previsualiza en tiempo real
- Copia el código CSS