Generador de Sombra de Texto
Disena efectos CSS text-shadow con multiples capas. Ajusta desplazamiento, desenfoque y color para cada capa de sombra.
Caracteristicas principales
- Soporte para múltiples capas de sombra
- Control de desplazamiento, desenfoque y color por capa
- Efectos predefinidos (neón, relieve, retro, 3D)
- Texto de vista previa editable
Guide
La propiedad CSS text-shadow añade capas de sombra detrás de los caracteres de texto. Sirve tanto para propósitos funcionales como decorativos: mejorar la legibilidad del texto sobre fondos ocupados, crear profundidad y dimensión, producir efectos de brillo neón, construir estilos tipográficos retro y vintage, y añadir un pulido sutil a encabezados y texto display. Esta guía cubre la sintaxis, las técnicas de capas, los efectos comunes, las consideraciones de rendimiento y los patrones de diseño prácticos. La sintaxis de text-shadow toma de dos a cuatro valores más un color opcional: text-shadow: offset-x offset-y blur-radius color. El valor offset-x mueve la sombra horizontalmente (positivo mueve a la derecha, negativo a la izquierda). El valor offset-y mueve la sombra verticalmente (positivo mueve hacia abajo, negativo hacia arriba). El valor blur-radius controla cuán difusa es la sombra (0 crea una copia de bordes afilados, valores más altos crean sombras más suaves). El valor color establece el color de la sombra (por defecto el color del texto si se omite). Ejemplo: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) crea una sombra oscura suave desplazada hacia abajo y a la derecha. Las sombras múltiples se separan con comas, y cada sombra se renderiza en orden (la primera sombra encima). Esta capacidad de capas es lo que habilita efectos complejos. text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666 crea un efecto 3D apilado con tres capas de sombra a desplazamientos crecientes. La primera sombra (más cercana al texto) es la más oscura, y cada sombra sucesiva es más clara, simulando profundidad. No hay límite en el número de sombras que puedes apilar, aunque el rendimiento se degrada con conteos muy altos (generalmente por encima de 10 a 15 capas desenfocadas). El radio de desenfoque determina el tipo de sombra. Un radio de desenfoque de 0 crea una copia dura del texto, útil para efectos de extrusión 3D, contornos y sombras apiladas. Un radio de desenfoque pequeño (1px a 3px) crea una sombra sutil y ajustada adecuada para mejorar la legibilidad del texto. Un radio de desenfoque medio (4px a 8px) crea una sombra visible pero suave para énfasis de encabezado. Un radio de desenfoque grande (10px a 30px) crea un efecto de brillo donde la sombra se extiende más allá del contorno del texto. Los radios de desenfoque muy grandes (40px+) crean efectos de brillo ambiental. El algoritmo de desenfoque es un desenfoque gaussiano, lo que significa que la intensidad de la sombra cae suavemente desde el centro. Las sombras de legibilidad son la aplicación más práctica. Cuando el texto está sobre una fotografía, degradado o fondo estampado, una sombra sutil mejora la legibilidad sin añadir un telón de fondo sólido. Para texto claro sobre fondos variados: text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6). Para texto oscuro sobre fondos variados: text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8). La clave es mantener los desplazamientos pequeños (0 a 1px) y el desenfoque suave (2px a 4px) para que la sombra apoye al texto sin ser notada como un elemento visual en sí mismo. Esta técnica se usa ampliamente en secciones principales, texto de banner y cualquier texto superpuesto sobre imágenes. La dirección de los desplazamientos de sombra comunica una fuente de luz. Una sombra desplazada hacia la parte inferior derecha (x positiva, y positiva) implica una fuente de luz en la parte superior izquierda, que es la convención más común en diseño de interfaz y coincide con cómo percibimos los objetos físicos iluminados desde arriba. Una sombra desplazada directamente hacia abajo (0 x, y positiva) implica una fuente de luz cenital. Una dirección de sombra consistente en todos los elementos de una página mantiene la ilusión de una fuente de luz unificada. Mezclar direcciones de sombra (un elemento sombreado hacia la derecha, otro hacia la izquierda) crea inconsistencia visual. Los efectos de brillo neón usan radios de desenfoque grandes con colores brillantes y saturados. La técnica superpone múltiples sombras a desplazamiento cero con radios de desenfoque crecientes. Un efecto neón básico: text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa. Las sombras interiores son blancas (simulando el núcleo brillante de un tubo de neón), y las sombras exteriores usan el color del brillo. Pon el color del texto en blanco y el fondo en oscuro (casi negro) para el efecto neón completo. Combínalo con una fuente que tenga trazos finos (como una fuente monoline o script) para imitar la señalización de neón real. El parpadeo neón puede añadirse con animaciones CSS que ciclan entre configuraciones de sombra ligeramente diferentes. Una animación de fotogramas clave que alterna entre el conjunto completo de sombras y una versión reducida (menos capas, radios de desenfoque menores) cada 0,1 a 0,5 segundos crea un parpadeo convincente. Añade variaciones de temporización de animación (steps(), duraciones de aspecto aleatorio) para que el parpadeo se sienta natural en lugar de mecánico. Este efecto es popular para landing pages temáticas retro, interfaces de juegos y sitios de portafolio. Los efectos de extrusión 3D crean la ilusión de profundidad apilando sombras duras a desplazamientos progresivos. Un efecto de texto 3D básico: text-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555, 4px 4px 0 #555, 5px 5px 0 #555. Cada capa está un píxel más lejos del texto, construyendo una apariencia extruida. Para un efecto más refinado, oscurece cada capa sucesiva: text-shadow: 1px 1px 0 hsl(210, 50%, 40%), 2px 2px 0 hsl(210, 50%, 35%), 3px 3px 0 hsl(210, 50%, 30%), 4px 4px 0 hsl(210, 50%, 25%). Añadir una sombra suave después de las capas duras (5px 5px 10px rgba(0,0,0,0.4)) ancla el texto 3D con una sombra proyectada. Los efectos de sombra larga extienden el concepto de extrusión 3D a muchas más capas, creando sombras que se estiran a través del fondo. Una sombra larga podría apilar 50 o más capas, cada una desplazada 1px con color que se desvanece gradualmente. Generarlas a mano es impracticable. Usa un preprocesador CSS (Sass o Less) con un bucle para generar las capas de sombra de forma programática. En Sass: $shadow: (); @for $i from 1 through 50 { $shadow: append($shadow, ($i * 1px $i * 1px rgba(0,0,0, 0.5 - $i * 0.01)), comma); } text-shadow: $shadow. El resultado es una sombra diagonal dramática que se estira detrás del texto. Los efectos de contorno (trazo) usan múltiples sombras duras a desplazamiento cero o pequeño para crear un contorno de texto. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 coloca sombras afiladas en las cuatro esquinas diagonales, rodeando el texto con un contorno de 1px. Para un contorno más completo, añade también sombras en las direcciones cardinales: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000. Para un contorno más grueso, aumenta los desplazamientos a 2px y añade posiciones intermedias. Ten en cuenta que CSS también tiene -webkit-text-stroke para contornos de texto, que proporciona resultados más suaves pero solo funciona en navegadores WebKit/Blink. El enfoque con text-shadow está soportado de forma más universal. Los efectos de texto retro y vintage combinan text-shadow con fuentes y paletas de color específicas. Un efecto tipográfico (hundido) usa una sombra oscura ligeramente arriba y una sombra clara ligeramente abajo: text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3). Aplica esto a texto gris sobre un fondo gris medio. La sombra oscura arriba sugiere que el texto está presionado en la superficie, mientras que la sombra clara abajo capta la luz en el borde inferior. Un efecto elevado (en relieve) invierte las sombras: claro arriba, oscuro abajo. Ambos efectos funcionan mejor con pesos de fuente más pesados y paletas de color apagadas. Los efectos de texto de fuego, hielo y elementales superponen muchas sombras con degradados de color. Un efecto de fuego podría usar: text-shadow: 0 0 4px #fefcc9, 0 -2px 6px #feec85, 0 -4px 11px #ffae34, 0 -6px 17px #ec760c, 0 -8px 22px #cd4606, 0 -10px 28px #973716, 0 -14px 40px #451b0e. Cada capa se mueve hacia arriba (desplazamiento y negativo) con desenfoque creciente, transitando de amarillo brillante en la base a través de naranja a rojo oscuro, simulando llama. Un efecto de hielo usa la misma técnica con tonos azules y blancos, con sombras extendidas hacia abajo. Estos efectos decorativos se reservan mejor para encabezados en proyectos creativos, interfaces de juegos y materiales promocionales. El rendimiento de text-shadow es generalmente bueno para casos de uso típicos (de una a tres capas de sombra). Cada capa de sombra exige que el navegador renderice una copia adicional del texto con el color, desplazamiento y desenfoque especificados. Las sombras duras (blur-radius: 0) son baratas porque son simples copias desplazadas. Las sombras desenfocadas son más costosas porque el navegador debe calcular un desenfoque gaussiano para cada capa. Apilar 8 o más sombras desenfocadas (como en los efectos neón) en texto grande que está animado o en un área que se repinta con frecuencia puede impactar en la tasa de fotogramas en dispositivos de gama baja. Para texto animado con sombras pesadas, prueba en los dispositivos objetivo y considera reducir el conteo de sombras en móvil. Animar text-shadow con transiciones CSS crea efectos hover atractivos. Un patrón común transita de sin sombra a una sombra visible al pasar el cursor: transition: text-shadow 0.3s ease. Animar entre dos sombras multicapa complejas funciona pero exige que ambos estados tengan el mismo número de capas de sombra. Si el estado inicial tiene tres capas y el estado hover tiene cinco, la transición no interpolará suavemente para las capas adicionales (aparecerán de golpe en lugar de desvanecerse). Mantén los conteos de capas consistentes entre estados de animación para transiciones suaves. Text-shadow con propiedades personalizadas CSS habilita efectos tematizables y mantenibles. Define tus sombras como propiedades personalizadas: --shadow-heading: 2px 2px 4px rgba(0,0,0,0.3). Referéncialas en tus estilos: text-shadow: var(--shadow-heading). En modo oscuro, redefine la propiedad: --shadow-heading: 2px 2px 8px rgba(0,0,0,0.7) (sombra más fuerte necesaria en fondos oscuros para el mismo efecto visual). Este enfoque mantiene los valores de sombra en un solo lugar y hace que el cambio de tema sea trivial. También puedes crear tokens de sombra a nivel de componente: --shadow-btn-hover, --shadow-heading-hero, --shadow-text-overlay. La relación entre text-shadow y la elección de fuente importa significativamente. Las fuentes finas y de peso ligero producen sombras delicadas que pueden parecer elegantes. Las fuentes bold y pesadas producen sombras gruesas y prominentes que exigen atención. Las fuentes script y decorativas pueden producir sombras desordenadas donde las capas de sombra superpuestas de caracteres adyacentes interfieren entre sí. Las fuentes monoespaciadas producen sombras limpias y uniformes porque su ancho de carácter consistente crea un espaciado de sombra uniforme. Prueba tu efecto de sombra con tu fuente real en tu tamaño real. Un efecto que se ve genial en una palabra de muestra podría verse desordenado en una frase completa. Text-shadow en distintos tipos de fondo exige enfoques diferentes. En fondos sólidos, tienes control total y puedes usar cualquier técnica de sombra. En fondos de degradado, asegúrate de que el color de la sombra funcione en todo el rango del degradado. En imágenes, usa sombras que creen contraste independientemente de qué parte de la imagen se sitúe detrás del texto (el enfoque de sombra de legibilidad funciona mejor aquí). En fondos transparentes o semitransparentes (efectos de cristal), text-shadow suele ser esencial para mantener la legibilidad porque el color de fondo varía. Para fondos oscuros, usa colores de sombra más brillantes o efectos de brillo. Para fondos claros, usa sombras oscuras estándar. Text-shadow interactúa con text-decoration de formas específicas. Los subrayados, las líneas superiores y las tachaduras no reciben sombras. La sombra se aplica solo a las formas de glifo en sí. Si necesitas texto sombreado con un subrayado sombreado, usa un pseudoelemento o border-bottom para el subrayado y aplica su propio box-shadow. De forma similar, text-shadow no afecta al color de resaltado de selección (pseudoelemento ::selection). La sombra sigue visible detrás del texto seleccionado, lo cual puede crear efectos visuales extraños con ciertas combinaciones de color. Text-shadow en diseño responsivo debería escalar con el tamaño de fuente. Una sombra de 2px que parece apropiada en un encabezado de 48px se vuelve desproporcionadamente grande en un encabezado de 24px en móvil. Usa unidades em en lugar de px para los valores de sombra para mantener el escalado proporcional: text-shadow: 0.04em 0.04em 0.08em rgba(0, 0, 0, 0.3). Esta sombra escala con el tamaño de fuente, manteniendo la misma proporción visual independientemente del tamaño renderizado real. Para clases utilidad responsivas, define variantes de sombra para los distintos niveles de encabezado. CSS text-shadow comparado con los efectos de texto SVG y el renderizado de texto en canvas difiere en capacidad y rendimiento. SVG ofrece efectos de texto más sofisticados a través de filtros, máscaras, degradados y patrones aplicados a elementos de texto. Canvas proporciona control a nivel de píxel sobre el renderizado de texto con las propiedades shadowBlur, shadowColor y shadowOffsetX/Y. CSS text-shadow es la opción más simple y con mejor rendimiento para texto web. Usa CSS para efectos de sombra estándar. Recurre a SVG cuando necesites efectos más allá de los que ofrecen las sombras CSS. Canvas es apropiado para el renderizado de texto dinámico basado en datos, como gráficos y visualizaciones. Combinar text-shadow con otras propiedades de texto CSS crea efectos en capas. Text-shadow más background-clip: text (con -webkit-background-clip: text) más un fondo de degradado crea texto con un relleno de degradado y una sombra. Text-shadow más mix-blend-mode en un elemento padre crea efectos de sombra mezclados donde la sombra interactúa con el fondo según el modo de mezcla. Text-shadow más filter: drop-shadow() en el padre crea una sombra del texto ya sombreado, duplicando el efecto de profundidad. Estas combinaciones son potentes pero exigen pruebas en distintos navegadores ya que el soporte varía. Text-shadow en clientes de correo electrónico tiene un soporte limitado pero útil. La mayoría de los clientes de correo modernos (Gmail, Apple Mail, Outlook en Mac, Yahoo Mail) soportan text-shadow básico. Outlook en Windows (que usa el motor de renderizado de Word) no soporta text-shadow. Para el diseño de correo electrónico, usa text-shadow como mejora progresiva: el correo se ve bien sin él y mejor con él. Mantén los efectos simples (capa única, desplazamiento pequeño, desenfoque modesto) porque las sombras multicapa que se ven geniales en la web pueden renderizarse de forma impredecible en clientes de correo. Las hojas de estilo de impresión deberían típicamente eliminar text-shadow. Las sombras añaden peso visual en pantalla pero pueden verse embarradas en impresión, especialmente en impresoras de inyección de tinta. Usa @media print { * { text-shadow: none; } } para eliminar todas las sombras de texto en la salida de impresión. Si sombras específicas sirven a un propósito funcional en impresión (como asegurar el contraste del texto sobre un fondo de color), presérvalas selectivamente mientras eliminas las sombras decorativas. Las diferencias de renderizado entre navegadores en text-shadow son menores pero existen. Los navegadores basados en Chromium, Firefox y Safari soportan todos text-shadow con sintaxis idéntica pero pueden renderizar el desenfoque de forma ligeramente distinta. Firefox tiende a producir radios de desenfoque más ajustados que Chrome para el mismo valor. Safari puede manejar valores de desenfoque muy grandes de forma distinta en los extremos. Estas diferencias rara vez son perceptibles en uso práctico pero pueden importar para diseños perfectos al píxel. Si la apariencia exacta de la sombra importa, prueba en todos los navegadores objetivo y ajusta los valores por navegador usando feature queries CSS o detección de user agent como último recurso. El rendimiento de text-shadow en frameworks CSS puede gestionarse a través de clases utilidad. Tailwind CSS proporciona utilidades de sombra que funcionan bien para box-shadow pero exige configuración personalizada para text-shadow. Añade utilidades text-shadow a tu configuración Tailwind: extiende el tema con valores textShadow y crea un plugin que genere las clases utilidad correspondientes. Esto te da clases como text-shadow-sm, text-shadow-md, text-shadow-lg y text-shadow-glow que mantienen la consistencia en todo el proyecto sin estilos en línea repetitivos. Generar valores de text-shadow de forma programática es necesario para efectos con muchas capas. Una función JavaScript que genera un efecto de extrusión 3D: const layers = Array.from({length: depth}, (_, i) => (i+1) + 'px ' + (i+1) + 'px 0 ' + color).join(', '). Para efectos neón, una función puede generar capas de brillo concéntricas con desenfoque creciente: const glow = radii.map(r => '0 0 ' + r + 'px ' + color).join(', '). Almacenar estos valores generados en propiedades personalizadas CSS (--shadow-3d, --shadow-neon) mantiene el CSS limpio mientras JavaScript maneja la lógica compleja de generación. Text-shadow con fuentes variables crea posibilidades interesantes. Como las fuentes variables permiten transiciones suaves de peso, combinar un font-weight animado con un text-shadow animado correspondientemente crea texto que parece volverse más pesado y proyectar una sombra más profunda simultáneamente. Establece ambas propiedades en una transición o animación CSS: transitar font-weight de 400 a 700 mientras se transita text-shadow de 1px 1px 2px rgba(0,0,0,0.2) a 2px 2px 6px rgba(0,0,0,0.4) produce una animación cohesiva de peso y profundidad. Las consideraciones de accesibilidad para text-shadow son sencillas: las sombras no deben reducir la legibilidad del texto. Un error común es usar un color de texto que depende de su sombra para el contraste. Si la sombra falla al renderizar (clientes de correo antiguos, algunas herramientas de accesibilidad, hojas de estilo de impresión), el texto debe seguir siendo legible contra su fondo por sí mismo. Usa text-shadow para mejorar la legibilidad, no para crearla. El color de texto base debería superar los requisitos de contraste WCAG contra el fondo independientemente de cualquier sombra. El modo de alto contraste en Windows elimina text-shadow por completo, así que tu diseño debe funcionar sin él. La herramienta generadora de text-shadow te permite añadir, eliminar y configurar múltiples capas de sombra visualmente, ajustando desplazamiento, desenfoque y color para cada capa mientras ves el resultado en tiempo real. Este enfoque visual es más rápido que codificar manualmente sombras multicapa, particularmente para efectos complejos como brillos neón o extrusiones 3D donde la interacción entre capas determina la apariencia final. Copia el CSS generado en tu hoja de estilos y ajústalo según sea necesario para tu contexto específico.
Preguntas frecuentes
¿Puedo añadir múltiples sombras de texto?
Sí, puedes añadir capas de sombra ilimitadas. Cada capa puede tener su propio desplazamiento, radio de desenfoque y color.
¿Cómo afecta text-shadow al rendimiento?
Las sombras de texto están aceleradas por GPU en los navegadores modernos y tienen un impacto mínimo en el rendimiento para un uso típico.
