Paleta de Sombras CSS y Elevación
Sistemas de Diseño y Motor de Elevación Tailwind

Generador de Paletas de Box Shadow Multicapa y Elevación CSS

Diseña sombras multinivel suaves y modernas con niveles de elevación personalizados, difusión de luz ambiental, resplandores tonales y clases de Tailwind.

100% Privacidad del Lado del Cliente
Compatible con W3C CSS y DTCG
Preajustes:
Física de Sombras y Motor de Elevación
Inspeccionar Nivel de ElevaciónViendo los 6 Niveles
4 capas
2 (Rápido)4 (Equilibrado)6 (Ultrasuave)
90°
0° Derecha90° Luz Diurna180° Izquierda270° Inferior
40px
16px (Sutil)40px (Estándar)80px (Dramático)
1.5x
0.5x (Nítido)1.5x (Natural)3.0x (Resplandor Difuso)
-2px
-8px (Ultranítido)-2px (SaaS Moderno)+4px (Expansión Clay)
16%
5% (Sutil)16% (Estándar)50% (Alto Contraste)
#0F172A
Balance de Luz Ambiental45%
Luz Clave FocalizadaResplandor Ambiental Difuso
Niveles: 6•Microcapas: 24•Azimut: 90°
#0f172a (16%)
Lienzo:
Forma:
xs3px elevación

Microelevación

Bordes sutiles, acentos en insignias y resaltados de filas de tablas

4 capas
sm8px elevación

Estado de Reposo

Botones, campos de formulario y tarjetas base en reposo

4 capas
md14px elevación

Elevación Interactiva

Estados hover, tooltips flotantes y paneles de superficie activa

4 capas
lg22px elevación

Elemento Flotante

Menús desplegables, capas de selección y botones de acción flotantes

4 capas
xl30px elevación

Modal Superpuesto

Diálogos, paneles laterales deslizables y notificaciones críticas

4 capas
2xl40px elevación

Flotación Hero

Diálogos splash, galerías lightbox y modales de nivel superior

4 capas
Formato: preview•1529 Bytes
Estándares: Especificación CSS Nivel 3 • WebKit / Blink / Gecko
Jerarquía de Elevación
6 Niveles Discretos
24 Microcapas Calculadas en Total
Vector de Luz y Desenfoque
Azimut: 90° • 1.5x Difusión
Offset de Dispersión -2px • Exp de Atenuación 1.5
Exportación de Tokens
Listo para Tailwind y DTCG
Cero Bandas • AST 100% en Navegador

Simulación Física 100% en el Cliente

Proyecciones vectoriales de luz y cálculos exponenciales de desenfoque ejecutados íntegramente en la memoria de su navegador.

Eliminación de Bandas con Sombras Multicapa

Convierte sombras CSS individuales duras en gradaciones suaves multicapa con dispersión negativa para contornos limpios.

Tokenización Universal para Sistemas de Diseño

Genera tokens de elevación listos para usar en Tailwind CSS v3/v4, variables CSS y archivos JSON de Style Dictionary.

Referencia técnica y guía de arquitectura

Guía de Desarrollo: Generador de Paletas de Sombras en Capas y Elevación CSS — Guía de referencia

Diseña sombras multinivel suaves y modernas con niveles de elevación personalizados, difusión de luz ambiental, resplandores tonales y clases de Tailwind.

Parámetros clave y controles

layersnumber

Número total de capas de sombra (generalmente de 2 a 6) superpuestas para simular una difusión lumínica y penumbra realistas.

Por defecto: 4
elevationnumber | string

Distancia virtual en el eje Z respecto a la superficie, determinando el multiplicador global para el desplazamiento vertical y radio de desenfoque.

Por defecto: 16px
shadowColorstring (hex | rgba | hsl)

Color base y opacidad utilizados para las capas ambientales y direccionales. Admite tonos coloreados integrados con la paleta de la interfaz.

Por defecto: rgba(15, 23, 42, 0.08)
spreadnumber (px)

Modificador de radio de propagación (spread) aplicado progresivamente para ajustar la huella de cada capa respecto a los bordes de la caja.

Por defecto: -2px
diffusionCurvestring (linear | exponential | custom-ease)

Curva matemática que rige el crecimiento exponencial del radio de desenfoque y el desvanecimiento del canal alfa a través de las capas.

Por defecto: exponential

Consejos profesionales y mejores prácticas

Evita el negro puro 'rgba

Evita el negro puro 'rgba(0, 0, 0, 0.2)' sobre fondos claros o coloridos. Mezcla las sombras con el tono de fondo circundante (como un azul pizarra 'rgba(15, 23, 42, 0.08)') para obtener una profundidad vibrante y realista.

Estratificación dual: Umbra vs. Penumbra

Combina una capa estrecha y definida con poco desenfoque para marcar la base de contacto (umbra) con 3 o 4 capas amplias y muy transparentes para la oclusión ambiental (penumbra).

Hacer transiciones directas sobre la

Hacer transiciones directas sobre la propiedad 'box-shadow' obliga a un costoso repintado (repaint) por CPU en cada fotograma. Aplica la sombra elevada sobre un pseudoelemento '::after' y anima su propiedad 'opacity' mediante GPU.

En fondos oscuros

En fondos oscuros, las sombras negras no generan contraste. Sigue el estándar de Material Design: aumenta gradualmente la luminosidad superficial de las tarjetas y utiliza sutiles destellos tonales perimetrales.

Errores comunes y solución de problemas

Bandas de color visibles y artefactos escalonados entre capas de sombra

Incrementa el número de capas a 4 o 5 y reduce los incrementos de opacidad alfa por capa. Asegúrate de que los valores de desenfoque escalen de forma exponencial (ej. 1px, 3px, 8px, 18px, 36px) en vez de lineal.

Las sombras se cortan bruscamente en el límite del contenedor padre

Los contenedores con 'overflow: hidden' recortan los márgenes exteriores de las sombras. Sustitúyelo por 'overflow: clip' con espaciado interno (padding) adecuado, o delega la sombra a un pseudoelemento sin desbordamiento.

Caída de fotogramas (FPS) al desplazar listas extensas con muchas tarjetas sombreadas

Múltiples sombras multicapa en listas virtualizadas saturan el rasterizador del navegador. Limita los elementos repetitivos de la cuadrícula a 2 o 3 capas y reserva las configuraciones de más de 5 capas para diálogos modales o menús flotantes.

Preguntas frecuentes (FAQ)

¿Por qué las sombras CSS en capas múltiples son mejores que las sombras simples?▼

La luz física nunca genera una dispersión uniforme. Una sombra real contiene un núcleo nítido (umbra) y una región difusa que se esparce gradualmente (penumbra). Una sola sombra CSS luce artificial y plana, mientras que agrupar de 3 a 6 capas replica de manera fiel la atenuación óptica cuadrática inversa de la luz.

¿Cómo puedo integrar las paletas de sombras generadas en Tailwind CSS?▼

Puedes incluir la cadena de sombras separada por comas en tu archivo 'tailwind.config.js' dentro de 'theme.extend.boxShadow', o declarar variables CSS nativas como '--elevation-3' en tu archivo de estilos global y utilizarlas con 'shadow-[var(--elevation-3)]'.

¿Afecta negativamente al rendimiento acumular 5 o 6 capas de sombra?▼

En elementos estáticos, el navegador genera la capa de composición una sola vez con un impacto de rendimiento insignificante. El costo computacional solo se eleva al transformar o redimensionar elementos continuamente, lo cual se resuelve animando la opacidad de pseudoelementos.

¿Cómo se debe organizar una escala de elevación en un Design System?▼

Estructura tus tokens en niveles semánticos (ej. elevation-low para botones, elevation-mid para tarjetas, elevation-high para menús contextuales y elevation-overlay para modales), asegurando que el ángulo de incidencia lumínica sea idéntico en todos ellos.

Herramientas y utilidades relacionadas

Todas las herramientas →
Guía Técnica de Gradientes CSS & SintaxisDiseño

Referencia técnica exhaustiva sobre gradientes lineales, radiales y cónicos en CSS. Cubre paradas de doble posición, interpolación OKLCH, máscaras de texto y exportación a Tailwind CSS.

Abrir herramienta→
Referencia de desarrollador de SVG OptimizerDiseño

Utilidad de optimización SVG en el cliente para minificar XML, ajustar precisión de rutas, eliminar metadatos y sanitizar vectores XSS.

Abrir herramienta→
Referencia para Desarrolladores de Paleta de ColoresDiseño

Utilidad de desarrollo para generación de paletas de color, auditoría de contraste WCAG, simulación de daltonismo y exportación de tokens.

Abrir herramienta→
Referencia de Desarrollador para CSS GlassmorphismDiseño

Utilidad técnica y referencia de diseño para glassmorphism en CSS, filtros backdrop, reflejos especulares e interfaces de vidrio esmerilado con GPU.

Abrir herramienta→
Calculadora de Relación de Aspecto ReferenciaDiseño

Utilidad de desarrollo para cálculo de relaciones de aspecto, escalado de resoluciones, auditoría local de archivos y alineación de códecs de video.

Abrir herramienta→
Generador de Favicon e Iconos de Aplicación CheatsheetDiseño

Referencia técnica completa para generar favicons de navegador, iconos Apple Touch, manifiestos PWA de Android y fragmentos HTML.

Abrir herramienta→