Ajustar la sombra de una tarjeta
Superpón una o varias sombras, observa cómo afecta cada parámetro a la sensación de volumen y copia el CSS.
Cargando…
Guide
Generador de sombras CSS permite ajustar parámetros en tres modos —sombra de caja, neumorfismo y cristal esmerilado— y copiar el CSS directamente. La sombra de caja admite varias capas y cada una ajusta por separado el desplazamiento horizontal y vertical, el desenfoque, la propagación, el color, la opacidad y inset; el neumorfismo calcula automáticamente dos sombras, una clara y otra oscura, a partir del color de fondo, y permite cambiar entre relieve y hundido; el cristal esmerilado combina fondo translúcido, desenfoque backdrop-filter, borde claro y esquinas redondeadas.
Actualizado el 2026-09-102 min read
| Entrada | Salida | Notas |
|---|---|---|
| X=0, Y=8, desenfoque=24, negro al 18% | box-shadow: ... |
Sombra única predeterminada |
| Fondo gris claro + hundido | Dos sombras inset |
Los tonos claro y oscuro se generan solos |
colord.-webkit-backdrop-filter.Superpón una o varias sombras, observa cómo afecta cada parámetro a la sensación de volumen y copia el CSS.
Forma en un momento el código base para que el equipo de frontend lo siga afinando, sin escribir rgba ni sombras dobles a mano.
backdrop-filter desenfoca lo que hay detrás del elemento; si detrás solo hay un color plano, el efecto de desenfoque es débil por naturaleza.
No. El editor de sombra de caja conserva al menos una capa y el botón de eliminar se desactiva cuando solo queda una.
Todos los parámetros y el CSS se calculan solo en la página actual del navegador; no se suben ni se guardan.
Actualizado el 2026-09-10
Ajusta visualmente sombras box-shadow de varias capas, con modos neumorfismo y cristal esmerilado; copia el CSS con un clic
Esta herramienta no está traducida por completo; parte del contenido usa el idioma de origen o uno de reserva.
Se pueden apilar varias capas de sombra; hacer clic en una capa para editarla
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);