Banco text-shadow con escena tipográfica y compuerta AAA-halo

¿Qué hace el generador text-shadow?

El generador es un banco que se enfoca exclusivamente en la propiedad CSS text-shadow. A diferencia del generador CSS-shadow que cubre tres propiedades en paralelo, aquí obtiene cinco palancas especializadas para puro efecto de texto: escena tipográfica, compuerta AAA-halo, companion -webkit-text-stroke, emisor de utilidad Tailwind v4 y un pack de presets neo-brutalismo.

Hasta ocho capas de sombra pueden apilarse, cada una con offsets X e Y (±50 px), desenfoque (0-100 px) y color (hex 6 u 8 dígitos con alfa). Una vista previa en vivo muestra el stack renderizado en el nivel tipográfico elegido — Display 72 px, H1 40 px, Body 16 px, Caption 12 px o Code 14 px monoespacio.

25 presets curados sobre seis categorías cubren los movimientos canónicos de text-shadow: Drop (Soft-Drop 1/2/3, Long-Drop), Glow (Neon-Cian, Neon-Magenta, Pulse-Ámbar, Halo Suave), 3D-Extrude (3D-Extrude, Bloque-estratificado, Long-Hard-45), Letterpress (Realzado, Hundido, Grabado, Papel-Inset), Retro (Vaporwave, Cromo 80, Imprenta Periódico, Máquina de escribir) y Neo-Brutalismo (Brutal Negro, Brutal Color, Brutal Sello, Brutal Sticker).

¿Por qué una herramienta propia solo para text-shadow?

text-shadow tiene su propia característica de lectura. Las sombras detrás de glifos se comportan distinto que detrás de tarjetas: un blur 8 px que da profundidad sutil en una tarjeta se come el glifo en body-text. La heurística de legibilidad difiere del caso box-shadow — en tarjetas solo cuenta texto-vs-fondo, en text-shadow también sombra-vs-texto.

Las herramientas especializadas renderizan mejor que los bancos cuando el caso de uso es lo bastante estrecho. No necesita switch de pestañas 3-propiedades, ni picker de receta de superficie, ni cadena de filtros drop-shadow — construye una headline y quiere verla en cinco tamaños y verificarla contra trampas halo. Justo eso hace esta herramienta.

¿Cómo funciona la vista previa de escena tipográfica?

La escena tipográfica es la única palanca de la herramienta que no entra en la salida CSS — es un conmutador de vista previa. Conmuta entre cinco niveles predefinidos, cada uno mapeado a un caso de uso típico.

Display (72 px, Inter Bold, line-height 1.05): headlines hero, splash screens, declaraciones above-the-fold. A este tamaño, las sombras tienen suficiente espacio para llevar incluso valores anchos de blur. Los offsets neo-brutalismo sobre 6 px funcionan especialmente fuerte aquí.

H1 (40 px, Inter Bold, line-height 1.1): tamaño clásico de heading de sección. Las sombras necesitan aquí valores más ajustados que en Display — 1-2 px de drop suele bastar, stacks más grandes parecen sobrecargados.

Body (16 px, Inter Regular, line-height 1.5): texto corriente por defecto del navegador. A este tamaño se muestra la trampa blur-halo: un blur de 10 px elegante en Display deja body-text borroso y difícil de leer. La compuerta lo marca automáticamente.

Caption (12 px, Inter Medium, line-height 1.4): pies de imagen, notas al pie, pequeñas píldoras. Las sombras son arriesgadas aquí — cada píxel más presiona la legibilidad. Suele bastar 0-1 px de drop con 1 px de blur.

Code (14 px, JetBrains Mono Medium, line-height 1.5): muestras monoespaciadas. Las sombras en código suelen verse sucias porque los espacios uniformes de glifos muestran el halo con demasiada claridad.

¿Cómo lee la compuerta de legibilidad AAA-halo?

Tres ejes, cada uno calculado en vivo:

Eje 1 — Texto-vs-fondo (WCAG 2.2 SC 1.4.6 AAA): texto corriente necesita 7:1, Large-Text (≥ 18 pt o 14 pt negrita) 4,5:1. Si el valor está bajo 4,5:1, la compuerta cae a naranja — el stack solo es aceptable como headline. Bajo 3:1, cae a rojo — ningún halo puede salvarlo.

Eje 2 — Sombra-vs-fondo (WCAG 2.2 SC 1.4.11): componentes gráficos estructurales necesitan 3:1. Si la sombra se piensa como soporte de legibilidad (típico en texto blanco sobre imagen clara), no debe caer bajo 3:1, si no, no sostiene el texto.

Eje 3 — Heurística glow-trap: si la sombra está más cerca del color de texto que del fondo, el halo se funde con el glifo en vez de destacarlo. El valor se ve como contraste sombra-vs-texto. En cuanto el contraste sombra-vs-texto queda claramente bajo el de sombra-vs-fondo y ambos derivan bajo 1,5:1, la compuerta avisa explícitamente.

Más: aviso blur-halo: en body-text (≤ 16 px) y blur > 10 px, la compuerta señala la guía WebAIM baja visión — halos borrosos alrededor de body-text pueden sobrecargar a lectores con dislexia o baja visión.

¿Cómo funciona el companion -webkit-text-stroke?

Cuando necesita un efecto outline, hay dos vías en la web: el tradicional text-shadow-fake-stroke de 4 direcciones (cuatro capas en ±X, ±Y con blur 0) o el moderno -webkit-text-stroke más paint-order: stroke fill. Ambos dan resultados similares pero tienen trade-offs distintos.

-webkit-text-stroke es nítido y escala con el tamaño de fuente — una outline 1 px queda outline 1 px, ya sea la headline de 16 px o 96 px. Plus: paint-order: stroke fill renderiza el stroke DETRÁS del fill en vez de delante, para que finos curvados de glifo no queden cubiertos por la outline. Soporte navegador: Chromium, Safari y Firefox todos ≥ 2023.

El fake-stroke text-shadow tiene en cambio ventajas en outlines más gruesas (sobre 2 px) y al añadir blur — -webkit-text-stroke no puede hacer desenfoque. Los navegadores antiguos sin paint-order caen al fake-stroke.

El generador emite ambos patterns lado a lado en una caja de salida. Copie ambos a la hoja de estilo y decida en la implementación qué variante gana — o escriba ambos en un bloque @supports y deje al navegador enrutar.

¿Qué emite la salida Tailwind v4?

Tailwind v4.1 tiene cinco tamaños text-shadow-* integrados. Cubren drop-shadows simples, pero no stacks neon, 3D-extrude u offsets neo-brutalismo. El generador emite tres patterns de integración Tailwind en paralelo:

Pattern 1 — Bloque @utility (recomendado para reuse de design-token):

@utility text-shadow-neon-cian {
  text-shadow: 0px 0px 4px #00FFFF, 0px 0px 12px #00FFFFCC, 0px 0px 24px #00FFFF80;
}

Así class="text-shadow-neon-cian" es usable como utilidad de primera clase.

Pattern 2 — Valor arbitrario (sin edición de tema):

<h1 class="[text-shadow:0px_0px_4px_#00FFFF,_0px_0px_12px_#00FFFFCC]">…</h1>

Bueno para one-offs sin utilidad reutilizable.

Pattern 3 — Variable @theme (para reuse var()):

@theme {
  --text-shadow-neon-cian: 0px 0px 4px #00FFFF, 0px 0px 12px #00FFFFCC, 0px 0px 24px #00FFFF80;
}

.headline { text-shadow: var(--text-shadow-neon-cian); }

Práctico si la variable debe reutilizarse en varias propiedades CSS.

¿Qué es el pack de presets neo-brutalismo?

El neo-brutalismo es la contratendencia 2026 al Refined-Minimalism: bordes duros, altos contrastes, sin translucidez. En el contexto text-shadow eso significa: offsets duros 4-8 px, cero blur, un solo color plano por sombra, sin gradientes alfa. El pack contiene cuatro presets:

Brutal Negro: texto amarillo sobre fondo blanco, desplazamiento 6 px negro. Efecto de sello de cartel de impresión analógica.

Brutal Color: texto blanco sobre fondo negro, desplazamiento 8 px rosa. Alto reconocimiento para marcas brutalismo.

Brutal Sello: doble sombra — capa 1 en color de acento, capa 2 en negro desplazada. Efecto complementario como sellado uno sobre otro.

Brutal Sticker: doble sombra — capa 1 en blanco como highlight, capa 2 en negro desplazada. Efecto de sticker pegado con outline plástica.

Los cuatro presets son WCAG-aware: los offsets duros son por regla general seguros en contraste porque ninguna translucidez diluye la separación de colores.

¿Cómo guarda la herramienta mi configuración?

Para nada. Pure-client, sin subida, sin servidor, sin localStorage, sin cookie, sin tracking. Al cerrar la pestaña todo desaparece. El motor del navegador calcula cada sombra localmente — incluso en stacks grandes de ocho capas, la vista previa en vivo es fluida.

Quien quiera guardar una configuración sobre varias sesiones copia la salida CSS o Tailwind a su hoja de estilo. Es la ventaja de text-shadow como propiedad CSS: toda la configuración cabe en una sola declaración y no necesita archivo externo.