Generador CSS box-shadow

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);

Background

Box color

Drop Shadow

Inset

X Offset: 4px

Y Offset: 4px

Blur: 10px

Spread: 0px

Color

Última actualización: 2026 · Herramienta en línea gratuita

¿Qué es Generador CSS box-shadow?

Editor visual en línea gratuito para crear CSS box-shadow y copiar el código

1
Seleccionar preset — Comience rápidamente con un botón de preset.
2
Ajustar deslizadores — Ajuste la sombra con los deslizadores de desplazamiento X/Y, desenfoque y propagación.
3
Vista previa — Verifique el resultado en tiempo real en la vista previa superior.
4
Copiar CSS — Use el botón de copiar para obtener el CSS box-shadow.

Sí, use el botón 'Agregar sombra' para superponer múltiples sombras.

Sí, active la casilla Inset en cada sombra para crear una sombra interior.

Se proporcionan cinco presets: Subtle, Medium, Large, Inset y Double.

Sí, puede ingresar directamente rgba(0,0,0,0.15) en el campo de color.

No. Todos los cálculos se realizan en el navegador.