Checklist
Checklist de sombras
Dos capas: elevación + contacto
- Capa 1: spread mayor y menor opacidad para dar elevación.
- Capa 2: spread más cerrado para el contacto con la superficie.
- Evita blur excesivo en componentes con bordes duros.
Sombras multicapa nítidas para UI
Offsets apilados sin exceso de blur para una profundidad limpia.
Demo
Sombra por capas
Profundidad sin suciedad
box-shadow:
0 14px 34px rgba(15,23,42,0.25),
0 6px 14px rgba(15,23,42,0.16);Patrones
Casos de uso
Botones, tarjetas y chips flotantes
Botón primary
Elevación en hover + brillo inset
box-shadow:
0 10px 20px rgba(79,70,229,0.25),
inset 0 0 0 1px rgba(255,255,255,0.12);Chip flotante
Dos capas, sin blur pesado
box-shadow:
0 16px 30px rgba(0,0,0,0.18),
0 6px 14px rgba(0,0,0,0.22);