Generador CSS box shadow

Arrastra los controles para dar forma a tu sombra — desplazamiento, desenfoque, extensión, color e inset — apila tantas capas como quieras y copia el CSS. Todo se actualiza en vivo en tu navegador.

Vista previa

Color del bloque

Color de página

Capas de sombra

CSS generado

Todo funciona en tu navegador. No se sube nada.

Cómo funciona

STEP 1

Da forma a la sombra

Arrastra los controles de desplazamiento, desenfoque y extensión, elige un color y opacidad, y activa Inset para una sombra interior. El bloque se actualiza mientras mueves los controles.

STEP 2

Apila capas

Añade más capas para crear profundidad suave y escalonada — cada capa tiene su propia sombra con su propia configuración, combinadas en una sola regla.

STEP 3

Copia el CSS

Copia la declaración box-shadow lista para usar con un clic y pégala en tu hoja de estilos — no se sube nada.