Ajusta la sombra
Mueve los controles de desplazamiento horizontal y vertical, desenfoque y extensión.
Generador de sombras CSS (box-shadow)
Diseña un box-shadow con controles deslizantes en vivo para el desplazamiento, el desenfoque, la extensión y la opacidad, y copia el CSS.
Gratis
Sin registro
Se ejecuta en tu navegador
Mueve los controles; la vista previa se actualiza al instante.
¿También necesitas un fondo? Usa el Generador de degradados CSS.Usos habituales
- Da a tarjetas y botones una sombra suave y moderna
- Crea un efecto hundido para campos de formulario
- Reproduce la sombra de una maqueta de diseño
Cómo funciona
Cómo usar el generador de box-shadow CSS
Elige el color y la opacidad
Elige el color de la sombra y su intensidad, o cambia a una sombra interior.
Copia el CSS
Copia la regla box-shadow y pégala en tu hoja de estilos.
FAQ
Información útil
¿Cómo uso el generador de box-shadow CSS?
1. Ajusta la sombra: Mueve los controles de desplazamiento horizontal y vertical, desenfoque y extensión. 2. Elige el color y la opacidad: Elige el color de la sombra y su intensidad, o cambia a una sombra interior. 3. Copia el CSS: Copia la regla box-shadow y pégala en tu hoja de estilos.
¿Qué diferencia hay entre desenfoque y extensión?
El desenfoque suaviza el borde de la sombra. La extensión hace la sombra más grande o, con un valor negativo, más pequeña que el elemento.
¿Por qué usar una opacidad baja?
Las sombras suaves con un 10–25% de opacidad, aproximadamente, se ven más naturales que el negro sólido.
¿Afecta box-shadow a la maquetación?
No. Las sombras se dibujan fuera de la maquetación y no desplazan otros elementos.
Sigue avanzando
Más diseño y color
Generador de paletas de colores
Crea tonos claros, tonos oscuros y un color inverso a partir de un color.
Comprobador de contraste de color
Comprueba el contraste entre dos colores según WCAG.
Generador de degradados CSS
Crea degradados CSS lineales, radiales o cónicos con hasta seis paradas de color y copia el código.