Generador CSS box-shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Última actualización: 2026 · Herramienta en línea gratuita
¿Qué es Generador CSS box-shadow?
Generador CSS box-shadow gratuito en línea con controles de desplazamiento, desenfoque, expansión, color e inset, que ofrece vista previa en vivo de la sombra y genera código CSS box-shadow listo para copiar.
Cómo usar
- 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.
Herramientas relacionadas
Generador de degradado CSS Generador visual gratuito de degradados CSS: crea degradados lineales, radiales y cónicos, ajusta los puntos de color y el ángulo, y copia el código CSS listo para tus fondos.
Generador CSS border-radius Generador CSS border-radius gratuito en línea con ocho controladores de esquina independientes y deslizadores, que ofrece vista previa en vivo de la forma redondeada y genera código CSS listo para copiar.
Generador CSS Flexbox Playground CSS Flexbox gratuito en línea con editor visual para justify-content, align-items, flex-direction y wrap, que muestra vista previa de diseño en vivo y genera CSS Flexbox listo para copiar.
Preguntas frecuentes
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.