Taller de sombras CSS con 3 propiedades en una UI

¿Qué hace el generador de sombras CSS?

El generador es un banco de trabajo para las tres propiedades de sombra CSS box-shadow, text-shadow y filter: drop-shadow() en una sola UI. Por propiedad, una vista previa live muestra el resultado en un elemento demo adecuado: una tarjeta 280×160 para box-shadow, un gran glifo «Aa» para text-shadow y un logo SVG con transparencia para drop-shadow. Puede alternar entre fondo claro y oscuro, definir el color de elemento por tema y afinar los valores vía inputs numéricos o sliders.

Hasta seis capas se pueden apilar. Por capa se ajustan desplazamiento X e Y, desenfoque y — solo en box-shadow — propagación e inset. Vincule el color a un color picker más campo de texto hex, para que se acepten también valores hex de 8 dígitos con alfa. Un toque en un preset carga un stack curado: tarjeta plana, neumorfismo (claro/oscuro), glassmorfismo (tarjeta y sidebar), long-hard-shadow 45°, inner-shadow pressed, grabado de texto, brillo de texto, drop-shadow SVG por defecto y drop-shadow logo heavy.

La salida viene en tres formatos: CSS puro con declaración box-shadow: / text-shadow: / filter:, bloque @theme Tailwind v4 para class="shadow-{name}" o class="text-shadow-{name}" (vía directiva @utility, porque Tailwind v4 no tiene utility text-shadow nativa), y una variante de variable CSS con una variable por capa más un token combinado para box-shadow: var(--shadow-{name}).

¿Cuáles son los tres casos de uso?

box-shadow es la elección clásica para elementos rectangulares: tarjetas, botones, modales, tabs. La propiedad permite spread e inset, lo que la hace más flexible que las otras dos. La sombra se dibuja a lo largo del rectángulo de bounding-box — incluso si el elemento tiene esquinas redondeadas, la sombra sigue la forma border-radius.

text-shadow dibuja una sombra solo detrás de los glifos, no detrás de todo el elemento. Sin spread, sin inset (CSS-Spec). Casos de uso típicos: halos de lectura sobre fondos de imagen (texto blanco + halo negro de 1 px = legible sobre cualquier foto), efectos de grabado (1 px hacia abajo claro + 1 px hacia arriba oscuro) o brillos neón discretos para titulares de marketing.

filter: drop-shadow() corre como filtro CSS y es la única variante que respeta la máscara alfa. Un logo SVG con transparencia recibe una sombra a lo largo de la forma real. Un PNG con fondo recortado también. El trade-off: los filtros son más caros para la GPU que box-shadow, y varias llamadas drop-shadow() se escriben como cadena de filtros separadas por espacios — no separadas por comas como en box-shadow.

¿Cómo lee el gate de legibilidad WCAG 2.2?

En cuanto text-shadow o drop-shadow actúa sobre texto, el gate verifica dos ejes.

Eje 1 — texto contra fondo: WCAG 2.2 criterio 1.4.3 exige 4,5:1 para texto corrido y 3:1 para texto grande (≥ 18 pt o 14 pt negrita). Si el valor cae por debajo de 3:1, el gate cae en rojo pleno — ningún halo puede salvar, debe cambiar el color del texto o del fondo. Si el valor está entre 3 y 4,5, el stack es solo aceptable como texto grande.

Eje 2 — sombra contra fondo: WCAG 2.2 criterio 1.4.11 «Non-text Contrast» exige 3:1 para componentes gráficos estructurales. Si la sombra está por debajo de 3:1, el halo es decorativo en lugar de estructural — si la sombra debe sostener la legibilidad del texto (típico en texto blanco sobre imagen clara), le falta el contraste para ese papel. El gate muestra un aviso con borde naranja.

El generador calcula ambos ejes en vivo, en cuanto cambia el color de texto, sombra o fondo. La lógica de umbral sigue el algoritmo W3C y devuelve un valor bruto (por ej. 7,21:1) más una severidad categórica (ok / warn-shadow / warn-text / fail). Ninguna otra herramienta de sombras del set de comparación entrega el gate inline.

¿Qué significa light-dark() como salida dark-mode?

light-dark() es una función CSS Color Module 4 que elige un valor según el color-scheme actual. En lugar de dos reglas CSS separadas con @media (prefers-color-scheme: dark), escriba:

.card {
  box-shadow: 0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.56));
}

La función pertenece al set Baseline 2024 y está disponible en Chrome 123, Edge 123, Firefox 120 y Safari 17.5. El estado Widely Available (≥ 30 meses de cobertura amplia) se espera para finales de 2026 — hasta entonces, el generador escribe automáticamente un fallback @supports que enruta los navegadores más antiguos a dos reglas separadas con switch prefers-color-scheme.

El toggle en el generador es un solo interruptor. Si lo activa, el bloque de salida emite ambas variantes — moderna y fallback — en la misma caja de código. Copia todo y puede trabajar de inmediato en producción. En modo oscuro las sombras son típicamente tres o cuatro veces más fuertes (alfa más alta), porque el color de fondo está más cerca de la sombra y las capas finas se pierden en otro caso.

¿Qué recetas de superficie existen?

Tres tipos de recipe prefabricados se pueden cargar por stack box-shadow.

Neumorfismo es un lenguaje de diseño con dos sombras por elemento. Una sombra clara cae hacia la fuente de luz, una sombra oscura cae lejos de la fuente. El elemento parece como presionado fuera de la superficie. El generador ofrece ocho posiciones de fuente de luz (arriba izquierda, arriba, arriba derecha, derecha, abajo derecha, abajo, abajo izquierda, izquierda) y un slider de profundidad (2–40 px). Atención: el Neumorfismo tiene contrastes intrínsecamente bajos — el gate de legibilidad avisa activamente si las sombras están por debajo de 3:1 contra la superficie.

Glassmorfismo combina backdrop-filter: blur() saturate() con un fondo semitransparente. El efecto: frosted-glass translúcido sobre un fondo de color. El generador emite la cadena backdrop-filter más una box-shadow acompañante para el borde de vidrio. Soporte de navegador: backdrop-filter está disponible no prefijado desde Safari 18 (2024), antes Safari necesitaba el prefijo -webkit-backdrop-filter. Rendimiento: backdrop-filter dispara una subida de GPU por frame — con muchos elementos con efecto de vidrio, el frame rate puede colapsar en móviles de gama baja.

Long-Hard-Shadow es el stack de sombra dura 45° — seis capas con desplazamiento creciente y alfa decreciente, sin desenfoque. Da una sombra plana escalonada como en carteles antiguos o en los Material Design Long Shadows. Fuerte con un color de marca vivo como sombra (en lugar de negro), porque el borde duro muestra claramente el color.

¿Qué son las sombras coordinadas por color?

Las sombras estándar suelen ser rgba(0, 0, 0, 0.x) — una nube gris bajo el elemento. El anti-patrón: en elementos coloreados, la sombra negra parece de otro mundo. El motor coordinado por color deriva la sombra del color de elemento — mismo hue, lightness inferior (en OKLCH: L − 0,4), chroma reducida (C × 0,6). Un botón rojo recibe una sombra rojo oscuro, un botón azul una azul oscuro, uno verde una verde oscuro.

OKLCH es el espacio de color perceptualmente uniforme, en el que distancias numéricas iguales parecen visualmente del mismo tamaño. El desplazamiento de lightness −0,4 se clampea a [0,02, 0,95], para que incluso elementos negros o blancos puros tengan todavía una sombra visible. La reducción de chroma a 0,6 evita que la sombra se vuelva tan saturada como el elemento — si no, la sombra parecería una segunda capa en lugar de una sombra.

El generador aplica el motor a la capa 1 en cuanto pulsa «Aplicar a la capa 1». El alfa se queda inicialmente en 30 % — puede ajustarlo por capa.

¿Qué emite la salida Tailwind v4?

Tailwind v4 tiene una configuración CSS-First con el bloque @theme. Para box-shadow, el generador registra una variable --shadow-{name} y emite tanto la clase arbitrary-value (class="shadow-[…]") como la clase basada en token (class="shadow-{name}").

Para text-shadow, Tailwind v4 no tiene utility nativa. El generador usa la directiva @utility añadida en Tailwind v4:

@utility text-shadow-heading {
  text-shadow: 0px 1px 0px #FFFFFFCC, 0px -1px 1px #00000080;
}

class="text-shadow-heading" queda así utilizable como utility first-class. Para drop-shadow, Tailwind v4 registra de nuevo un token --drop-shadow-{name}; la clase se llama class="drop-shadow-{name}" y aplica automáticamente la propiedad filter.

¿Cómo funcionan permalink y privacidad?

El botón permalink codifica la configuración actual como fragmento JSON en la URL. Ejemplo: …/css-shadow-generator#config={"p":"box-shadow",…}. Los navegadores cargan los fragmentos en local — el servidor nunca ve la parte #. Puede marcar el enlace, compartirlo en un doc o enviarlo por Slack. Al abrir, el generador reconstruye el stack 1:1.

Cliente puro, sin subida, sin servidor, sin localStorage, sin cookies, sin tracking. Al cerrar la pestaña, todo desaparece. El motor del navegador calcula cada sombra en local — incluso con grandes stacks de seis capas, la vista previa live es fluida en cualquier dispositivo más joven que cinco años.