Generador de Sombras CSS (box-shadow)
Genera valores de box-shadow visualmente. Ajusta el desplazamiento, desenfoque, dispersión, color y usa sombras interiores o múltiples. Copia el CSS al instante.
Preview
Shadows
CSS
box-shadow: 0px 4px 12px 0px #00000080; Predeterminados
Tabla de contenidos
¿Qué es box-shadow?
box-shadow es una propiedad CSS que dibuja una o más sombras detrás de un elemento. Controlas el desplazamiento horizontal y vertical, el radio de desenfoque, la dispersión, el color y si la sombra es interior. Las sombras añaden profundidad sin marcado ni imágenes adicionales.
Sintaxis
box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Las sombras múltiples se separan con comas. Offset X/Y mueven la sombra; blur suaviza el borde; spread hace crecer o encoger la sombra; el color puede ser hex, rgb o rgba. Usa inset para una sombra interior.
Casos de uso
- Tarjetas y paneles — Sombras suaves para elevar el contenido.
- Botones — Profundidad sutil o interior para el estado presionado.
- Modales y menús desplegables — Sombras en capas para elevación.
- Imágenes — Enmarca o hace flotar imágenes con una sombra.
Preguntas frecuentes
Una sombra box interior se dibuja dentro del borde del elemento, como si la luz viniera desde arriba. Úsala para botones presionados, entradas o paneles hundidos.
Sí. Añade más sombras con "Añadir sombra". Se apilan en orden; la primera sombra está encima. Usa múltiples sombras para profundidad en capas o efectos combinados.