Generador de text-shadow CSS
Crea efectos text-shadow de CSS con varias capas: resplandores, contornos, 3D retro y texto en relieve. Vista previa en vivo con tu propio texto y código para copiar.
Ajustes predefinidos
Capas
Ajustes de la vista previa
Vista previa
Sombra
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Herramientas Relacionadas
Ver Todas¿Qué es Generador de text-shadow?
Esta herramienta crea la propiedad CSS text-shadow a partir de una o varias capas. Cada capa tiene un desplazamiento horizontal y vertical, desenfoque, color y opacidad, y la vista previa muestra tu propio texto de ejemplo con el resultado.
Cómo usar Generador de text-shadow
- Empieza con un ajuste predefinido como Resplandor, Retro, Contorno o Relieve, o deja la sombra predeterminada.
- Selecciona una capa y ajusta Desplazamiento horizontal, Desplazamiento vertical, Desenfoque, Color de la sombra y Opacidad.
- Añade más capas para contornos o efectos 3D apilados; quita las que no necesites.
- Escribe tu propio Texto de ejemplo y elige los colores de texto y de fondo para comprobar la legibilidad.
- Copia el código CSS.
Ejemplo
x 3px, y 3px, blur 0, color #ff0000, opacity 1
text-shadow: 3px 3px 0 #ff0000;
Cuándo usar Generador de text-shadow
Úsalo para títulos, textos de cabecera, efectos neón o retro y sombras sutiles que mejoran el contraste sobre imágenes. Para un contorno real en texto grande, -webkit-text-stroke da resultados más nítidos que las sombras apiladas; evita sombras intensas en el texto de párrafo porque reducen la legibilidad.
Cómo funciona Generador de text-shadow
Cada capa se escribe como x y blur color (text-shadow no tiene expansión ni inset). Los desplazamientos y el desenfoque son valores en px, y la opacidad se aplica al alfa del color, lo que da hex para colores opacos y rgba() en los demás casos. Las capas se separan con comas; la primera se dibuja encima. El ajuste Contorno usa cuatro desplazamientos de 1px en cada dirección diagonal, que es la forma habitual en CSS puro de simular un trazo de texto.
Casos de Uso Comunes
- Títulos con resplandor neón
- Texto blanco legible sobre fotos
- Títulos retro con efecto 3D apilado
- Contornos de texto simulados sin SVG
- Etiquetas en relieve o estilo letterpress
Preguntas Frecuentes
¿Por qué no hay opción de expansión?
La propiedad CSS text-shadow solo acepta desplazamientos, desenfoque y color. Para que una sombra parezca más gruesa, apila varias capas con desplazamientos pequeños.
¿Puedo crear un resplandor neón?
Sí: usa desplazamientos cero y dos o tres capas con desenfoque creciente en el mismo color brillante, como en el ajuste Resplandor.
¿text-shadow afecta al diseño?
No. Las sombras se pintan fuera del texto sin ocupar espacio, así que nunca mueven los elementos de alrededor.