Generador CSS Text Shadow

Anatomía de una sola capa de sombra

La propiedad CSS text-shadow está definida en el W3C CSS Text Decoration Module Level 3. La gramática acepta una lista separada por comas, donde cada capa tiene dos valores de longitud obligatorios, un radio de desenfoque opcional y un color opcional:

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

• offset-x: desplazamiento horizontal. Un valor positivo mueve la sombra a la derecha, uno negativo la mueve a la izquierda.
• offset-y: desplazamiento vertical. Un valor positivo mueve la sombra hacia abajo, uno negativo la mueve hacia arriba.
• blur-radius: desenfoque de estilo gaussiano. 0 es una sombra de borde duro; los valores más grandes la difuminan. Los valores negativos no son válidos.
• color: cualquier color CSS, incluidos rgba() / hsla() para transparencia parcial. Por defecto es currentcolor si se omite.

Las unidades de longitud son longitudes CSS completas: px, em, rem, vw, etc. Los porcentajes no están permitidos (esto coincide con box-shadow). La propiedad se hereda, así que un text-shadow establecido en un padre se aplica al texto descendiente a menos que se anule.

La regla de apilamiento que casi todo el mundo entiende mal

Cuando apilas varias sombras, se pintan de delante hacia atrás: la primera sombra de la lista separada por comas se pinta encima, la última se pinta más al fondo. La especificación del W3C es exacta: «Los efectos de sombra se aplican de delante hacia atrás: la primera sombra está encima.» La mayoría de los autores esperan el comportamiento de tipo cascada de «el último gana» al que están acostumbrados con otras propiedades CSS, y tropiezan en el momento en que necesitan una extrusión 3D o un resplandor por capas.

Una regla útil: al apilar sombras por capas, la especificación también garantiza que «las sombras pueden superponerse entre sí, pero nunca se superponen al texto en sí.» Los glifos del texto siempre se pintan encima, no puedes cubrir accidentalmente las letras con sus propias sombras.

Recetas para los efectos de la lista de preajustes

Sombra paralela suave: desplazamiento pequeño, desenfoque pequeño, negro semitransparente. Se lee profesional, no grita. Funciona en el texto del cuerpo sin perjudicar la legibilidad.

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

Resplandor de neón: desplazamientos cero, varias capas del mismo tono con un radio de desenfoque creciente para imitar la difusión de la luz. Funciona sobre fondos oscuros. La primera capa o las dos primeras pueden ser blancas para simular el núcleo brillante del tubo dentro del halo de color.

text-shadow:
  0 0 5px  #fff,
  0 0 10px #fff,
  0 0 20px #ff00de,
  0 0 30px #ff00de,
  0 0 40px #ff00de;

3D retro / extruido: desplazamientos de un solo píxel apilados con desenfoque cero, colores progresivamente más oscuros. Cada capa está un píxel más afuera que la anterior, lo que simula un lado cincelado. Recuerda la regla de delante hacia atrás: la PRIMERA capa de la lista es la más cercana al espectador (el frente de la extrusión).

text-shadow:
  1px 1px 0 #aaa,
  2px 2px 0 #999,
  3px 3px 0 #888,
  4px 4px 0 #777,
  5px 5px 0 #666;

Contorno / trazo: cuatro sombras de un solo píxel en cada dirección diagonal con desenfoque cero. Una forma barata de simular un contorno antes de que existiera -webkit-text-stroke; los navegadores modernos también aceptan -webkit-text-stroke: 1px black, que se renderiza más limpio porque sigue el contorno real del glifo.

text-shadow:
  -1px -1px 0 #000,
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;

Sombra de superposición hero: lo que hace que el texto blanco sea legible sobre una foto o un vídeo recargados. Una sombra de radio medio a baja opacidad restaura el contraste sin producir un aspecto de sombra paralela visible.

text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);

text-shadow frente a box-shadow frente a filter: drop-shadow()

Las tres propiedades producen efectos de tipo sombra, pero apuntan a cosas diferentes:

Usa text-shadow cuando la sombra deba seguir las formas de las letras. Usa box-shadow cuando la sombra deba seguir el borde del elemento. Usa filter: drop-shadow() cuando el elemento tenga una máscara alfa no rectangular (un SVG irregular, un PNG transparente con bordes curvos): es la única opción que respeta la forma renderizada real, incluidas las regiones transparentes.

Notas sobre el rendimiento

Cada capa de sombra es su propia operación de pintado. Una sombra de dos o tres capas es esencialmente gratis en los navegadores modernos, pero los efectos de sombra larga con más de 30 capas pueden afectar al rendimiento, en particular durante la animación. Dos reglas prácticas:

• No animes text-shadow en un bloque largo de texto. Un resplandor al pasar el cursor sobre un solo botón está bien; hacer pulsar la sombra en un párrafo de 200 palabras no.
• Cuidado con prefers-reduced-motion. Las sombras que pulsan o parpadean pueden desencadenar problemas de fotosensibilidad. Envuelve cualquier sombra animada en una barrera de consulta de medios para que los usuarios que han pedido al sistema operativo que reduzca el movimiento obtengan una versión estática.

@media (prefers-reduced-motion: no-preference) {
  .neon { animation: pulse 2s ease-in-out infinite; }
}

Accesibilidad y contraste

Una sombra decorativa intensa bajo el texto del cuerpo puede reducir el contraste por debajo del mínimo de 4,5 : 1 de WCAG 2.1 para el texto normal o de 3 : 1 para los componentes de interfaz grandes o en negrita, especialmente cuando el tinte de la sombra se acerca al color del texto. La sombra es decoración; el texto de debajo todavía tiene que cumplir el contraste con el color de fondo real. Las superposiciones hero resuelven el problema opuesto (el texto blanco que se vuelve ilegible sobre un fondo fotográfico) y suelen ser ventajas de accesibilidad, pero mide siempre el contraste del parche del peor caso sobre el que se asentará el texto.

Compatibilidad de navegadores

Universal en todos los navegadores actualizables desde principios de la década de 2010 (el soporte global de caniuse ronda el 97 %+ en 2026). Internet Explorer 9 y anteriores no admitían text-shadow: si todavía necesitas darles soporte, la alternativa convencional es dejar fuera la propiedad por completo (el IE antiguo simplemente renderiza el texto sin sombra, lo que normalmente se degrada de forma aceptable).

Errores comunes

1. Invertir el orden de las capas en los efectos de varias sombras. La primera capa de la lista separada por comas se pinta encima. Para un efecto 3D extruido, la cara FRONTAL de la extrusión es la PRIMERA sombra.
2. Olvidar que text-shadow no tiene expansión ni inset. Esas son características de box-shadow. text-shadow solo tiene x, y, desenfoque y color.
3. Usar sombras negras sobre texto oscuro. Sin efecto visible, la sombra la absorbe el mismo color oscuro que el texto.
4. Pasarse con el texto del cuerpo. Las sombras decorativas en párrafos largos perjudican la legibilidad y provocan fatiga de lectura. Reserva las sombras intensas para los encabezados y el texto hero.
5. Animar un efecto de sombra larga. 30 capas apiladas en transición por fotograma pueden bajar la página por debajo de 60 fps. Anima la opacity o el transform en el padre en su lugar.
6. Sorpresas de renderizado de subpíxeles con los contornos de un solo píxel. El truco del contorno de cuatro esquinas puede verse irregular en niveles de zoom no enteros. -webkit-text-stroke: 1px es más limpio donde se admite.
7. Olvidar prefers-reduced-motion en las sombras que pulsan. Algunos usuarios han pedido a su sistema operativo que reduzca la animación; respétalo.

Más preguntas frecuentes

¿Por qué mi extrusión 3D se ve mal?

Casi siempre el orden de las capas. Las varias capas de text-shadow se pintan de delante hacia atrás: la primera es la más cercana al espectador. Para una extrusión limpia, enumera las capas desde el desplazamiento más pequeño (frente) hasta el más grande (fondo), con colores progresivamente más oscuros.

¿Puedo animar text-shadow?

Sí, es una lista de sombras y CSS interpola por capa. Los efectos de resplandor al pasar el cursor son comunes. Evita animar los efectos de sombra larga con muchas capas, y respeta prefers-reduced-motion para los usuarios que han pedido al sistema operativo que minimice la animación.

¿Cómo hago un contorno de texto limpio?

Dos opciones. La alternativa multinavegador son cuatro sombras de un solo píxel, una en cada dirección diagonal (-1px -1px, 1px -1px, -1px 1px, 1px 1px). La opción moderna más limpia es -webkit-text-stroke: 1px black, que funciona en Chromium y Safari y sigue el contorno real del glifo en lugar de aproximarlo con cuatro sombras.

¿Por qué la sombra no aparece sobre mi texto?

Por diseño de la especificación. El W3C establece explícitamente que las sombras de texto «pueden, por tanto, superponerse entre sí, pero nunca se superponen al texto en sí.» Los glifos del texto siempre se pintan encima de cada sombra que proyectan, no puedes hacer intencionadamente que la sombra cubra las letras.

¿Funcionará el CSS generado en producción?

Sí. La salida es CSS estándar simple, sin dependencias de preprocesador ni de framework. Funciona en todos los navegadores modernos y se degrada limpiamente en los más antiguos (el texto se renderiza sin sombra). Coloca la regla en tu hoja de estilos y aplica la clase a tus titulares o botones.