Construir Box-Shadow multicapa

¿Qué hace el generador Box-Shadow?

El generador construye sombras CSS visualmente. Por capa elige el desplazamiento horizontal y vertical, el desenfoque, la propagación y el color de sombra — incluido un conmutador inset que alterna entre sombras exteriores e interiores. Se pueden apilar hasta diez capas, lo cual es obligado en sombras UI realistas: una sola capa parece plana, tres capas apiladas simulan el comportamiento real de la luz en una sala.

La vista previa en vivo muestra el resultado sobre una tarjeta cuyo color de fondo elija libremente — importante, porque el mismo set de sombras renderiza completamente distinto sobre off-white y sobre gris dark mode. La salida se ofrece en cuatro formatos: CSS plano para stylesheets clásicos, una clase Tailwind v4 con bloque @theme para registrar como design token, un atributo style inline y un bloque de CSS custom properties que exporta cada stack como token reutilizable.

¿Cómo funciona la propiedad box-shadow?

La propiedad CSS box-shadow sigue una sintaxis sencilla: [inset] offset-x offset-y [blur] [spread] color. Una sombra de tarjeta clásica se ve por ejemplo así: box-shadow: 0 4px 8px -2px rgba(0,0,0,0.1). Valores Y positivos empujan la sombra hacia abajo, valores X positivos hacia la derecha. El desenfoque suaviza los bordes — a 0 px la sombra es nítida, a 40 px difusa como una nube.

La propagación (spread) hace la sombra más grande o más pequeña que el elemento. Una propagación negativa acerca la sombra al cuadro, lo que es el truco para los modal-lifts para que la sombra no «se desborde». Una propagación positiva la agranda — útil para efectos glow o capas Highlight anchas en diseños dark mode.

¿Cómo se combinan varias box-shadow?

Varias sombras van en una sola declaración box-shadow, separadas por comas. Importante: el orden cuenta. La primera entrada se renderiza arriba — si quiere una sombra outline nítida por encima de una capa ambient suave, la entrada outline va primero.

.card {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),   /* contact */
    0 4px 8px rgba(0,0,0,0.08),   /* key */
    0 12px 24px rgba(0,0,0,0.08); /* ambient */
}

Tres capas suelen bastar. Las sombras UI realistas de Material Design apilan exactamente estas tres capas: una contact-shadow corta y densa en el borde inferior, una key-shadow media como acento principal y una ambient-shadow amplia y suave que simula la luz difusa de la sala. El modo receta automática del generador construye ese stack con un clic.

¿Qué significa inset y cuándo usarlo?

La palabra clave inset antes de los valores invierte la sombra hacia dentro — el elemento parece hundido en una superficie. Las sombras inset las pinta el navegador por encima del fondo pero bajo el contenido. Casos de uso clásicos:

• Campos de formulario. Una ligera sombra inset arriba (inset 0 1px 2px rgba(0,0,0,0.05)) indica «aquí puede entrar algo».
• Botones pulsados. Un inset marcado (inset 0 2px 4px rgba(0,0,0,0.16)) da el estado activo clásico sin que el elemento cambie de posición.
• Outlines hairline. inset 0 0 0 1px var(--color-border) da una línea interior pixel-perfect que renderiza mejor en High-DPI que un border real — el cuadro interior no lo come el box-sizing.

En el generador, una casilla por capa alterna entre inset y outset. Ambos se mezclan en el mismo stack — un look card clásico combina una ambient-shadow exterior con una hairline interior.

¿Cómo elegir color y alpha para sombras realistas?

Negro puro con alpha fija (rgba(0,0,0,0.2)) parece a menudo más duro de lo necesario en la práctica. Tres estrategias:

1. Teñido con el fondo. Si la página descansa sobre un off-white cálido (#FAFAF9), sombras teñidas en cálido (oklch(0.2 0.05 60 / 0.2)) son más naturales que negro puro. El generador toma cualquier color de teñido y lo reduce a la alpha correcta por capa.
2. Alpha por capa en lugar de single-layer alpha. Tres sombras apiladas con 8 %, 12 % y 20 % de alpha (receta Comeau) dan más profundidad que una sola sombra con 40 % de alpha. Los ojos interpretan la curva de luz escalonada como físicamente correcta.
3. OKLCH para color estable en tono. OKLCH (CSS Color Module Level 4) mantiene la saturación constante en todas las luminosidades. Al teñir una sombra hacia un color de marca, OKLCH no pierde chroma en lo oscuro — hex/RGBA sí.

El generador emite el color en la notación elegida por cada formato de salida: hex para máxima compatibilidad, HSL para control intuitivo hue-sat-light, OKLCH para flujos Tailwind v4.

¿Cuándo merece la pena Material Design Elevation?

Material Design define 1–24 como niveles de elevación canónicos, cada uno con un stack de sombras escalonado con precisión. Quien quiera un look Material 3 carga simplemente el nivel 1 para resting cards, el nivel 4 para FAB, el nivel 8 para modal sheets y el nivel 24 para dialog top-layers. El generador muestra 9 niveles canónicos (1, 2, 3, 4, 6, 8, 12, 16, 24) como quick-picks.

Para diseños fuera del ecosistema Material, los niveles son puntos de partida: cargue el nivel 4, baje los valores de desenfoque, cambie el teñido negro por una hue de marca. La salida cambia en vivo. Así obtiene la estructura de 3 capas correctamente escalonada sin tener que deducirla calculando.

¿Cómo se escriben box-shadow como design tokens?

En lugar de declarar cada sombra de tarjeta inline, se registra una vez como custom property:

:root {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08);
  --shadow-modal: 0 8px 16px -4px rgba(0,0,0,0.16), 0 20px 40px -8px rgba(0,0,0,0.12);
}

.card { box-shadow: var(--shadow-card); }
.modal { box-shadow: var(--shadow-modal); }

Tailwind v4 permite, desde la CSS-First-Config, el mismo patrón directamente en el bloque @theme:

@theme {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08);
}

La utility shadow-card queda así automáticamente disponible — como una clase nativa. El generador da ambas variantes en los modos de salida «Variables CSS» y «Tailwind v4», cada uno con nombre de token configurable.

¿Cuánto cuestan las box-shadow al renderizar?

El navegador pinta cada sombra mediante una pasada de paint separada: primero el elemento, luego cada sombra de atrás adelante. Tres factores empujan los costes:

• Radio de desenfoque. Valores altos de desenfoque (> 40 px) obligan a la GPU a grandes operaciones de convolución por frame. Para tarjetas estáticas da igual — para estados hover animados o scroll-driven lifts cuesta frame-time.
• Número de capas. Cuatro o más sombras en una declaración duplican el coste de paint por frame. Tres capas son el máximo habitual para UI animada.
• Valores de propagación. Valores de propagación mayores agrandan la región de paint y por tanto el número total de píxeles que el navegador debe difuminar.

El generador muestra un aviso de rendimiento en cuanto el desenfoque > 40 px O cuando se apilan más de tres capas. Sugerencia en ambos casos: poner will-change: box-shadow durante la animación y quitarlo después — eso ancla la sombra en una capa de compositor propia, lo que abarata la recomposición. Nunca poner permanentemente; eso consume memoria.

¿Qué casos de uso existen?

Resting cards. Una sombra sutil de 2 capas basta. Ejemplo: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.08).

Hover lifts. Stack idéntico, pero desplazamiento Y y desenfoque aproximadamente 2× — parece un levantamiento.

Modal sheets. Gran desplazamiento Y, desenfoque alto, propagación negativa para una forma enfocada. Más una capa outline para modo alto contraste.

Campos de formulario hundidos. Single inset-layer arriba para el vibe «pulse aquí».

Estados glow. Propagación > 0 con alpha baja y hue de marca — por ejemplo para focus rings en fondos oscuros.

Acentos soft-UI. Doble sombra con un highlight claro (arriba izquierda) y una sombra oscura (abajo derecha) — el generador tiene un preset para esto.

Preguntas frecuentes

¿Cómo funciona la propiedad CSS box-shadow?

La propiedad crea sombras alrededor de la caja de un elemento. Indique desplazamiento horizontal y vertical, opcionalmente desenfoque y propagación, y luego el color. Varias sombras se separan por coma — la primera entrada queda delante, las demás se apilan detrás.

¿Cómo se combinan varias box-shadow?

Varias sombras van en una sola declaración box-shadow, separadas por comas. El orden cuenta: la primera entrada se renderiza arriba. En el generador apile hasta diez capas — la vista previa muestra el resultado al instante, la salida contiene todas las capas en orden CSS.

¿Qué significa inset en una box-shadow?

Con la palabra clave inset, el navegador dibuja la sombra hacia dentro en lugar de hacia fuera — el elemento parece hundido en la superficie. Las sombras inset quedan por encima del fondo pero bajo el contenido. En el generador, un conmutador por capa alterna entre inset y outset.

¿Qué valor de desenfoque va bien para tarjetas?

Las tarjetas sutiles necesitan 4–8 px de desenfoque, los estados hover discretos 12–24 px, los modal-lifts 24–40 px. Valores más altos parecen más suaves pero cuestan tiempo de paint en móvil. El generador avisa con desenfoque por encima de 40 px y sugiere will-change: box-shadow para animaciones.

¿Cómo uso box-shadow en Tailwind v4?

Tailwind v4 permite clases arbitrarias shadow-[…] para cualquier valor de sombra. Más elegante: registre el stack vía @theme { --shadow-app: …; } en su CSS y use la clase shadow-app como una utility nativa. El generador entrega ambas variantes directamente.

¿Qué es una auto-layered shadow?

Tres capas apiladas — una contact-shadow corta en el borde, una key-shadow media como acento principal, una ambient-shadow larga y suave para la profundidad — dan sombras mucho más realistas que una sola capa. El modo receta automática genera ese stack de 3 capas a partir del nivel de elevación, la dirección de la luz y la teñida de color.

¿Funciona OKLCH en colores de box-shadow?

Sí. Los navegadores que admiten OKLCH (Chrome 111+, Firefox 113+, Safari 16.4+) renderizan oklch(0.6 0.18 30 / 0.2) como color de sombra igual que cualquier valor hex. OKLCH mantiene la saturación constante al teñir — el generador alterna entre salida hex/HSL/OKLCH sin pérdida.

¿La herramienta guarda mis shadow sets?

No. Todas las entradas se quedan en la pestaña del navegador, nada se guarda ni se sube. Al recargar, la herramienta está vacía. Para conservar sets, copie la salida de variables CSS en su propio stylesheet o en tokens.css.

¿Qué herramientas CSS están relacionadas?

Otras herramientas para CSS-authoring y gestión de color:

• Generador de gradiente CSS — construir degradados en OKLCH/Tailwind v4.
• Conversor Hex a RGB — convertir códigos hex en RGB, HSL y OKLCH.
• Comprobador de contraste — comprobar contraste WCAG AAA entre dos colores.
• Formateador CSS — formatear limpiamente CSS crudo o minificado.