Generador de Sombra de Caja CSS: Crea Sombras de Caja Visualmente
¿Necesitas agregar profundidad o elevación a una tarjeta, botón o panel? El CSS Box Shadow Generator te permite construir valores de box-shadow visualmente: establece el desplazamiento, desenfoque, expansión, color y opcionalmente inset, añade múltiples sombras y copia el CSS con un solo clic.
Ejemplo: Elige el ajuste preestablecido "Suave" para una sombra sutil, o "Capas" para una profundidad más realista. Ajusta el desplazamiento y el desenfoque con los deslizadores, elige un color (incluida la transparencia) y usa "Inset" para un aspecto presionado o hundido. La vista previa se actualiza a medida que cambias los valores. Copia el CSS y pégalo en tu hoja de estilos.
¿Qué es box-shadow?
box-shadow es una propiedad CSS que dibuja una o más sombras detrás (o dentro) de un elemento. Controlas el desplazamiento horizontal y vertical, el radio de desenfoque, la expansión, el color y si la sombra es inset. Las sombras de caja añaden profundidad y separación sin marcado adicional o imágenes, y funcionan en todos los navegadores modernos.
¿Por qué usar un generador de sombras de caja?
Iteración más rápida — Ajusta el desplazamiento, desenfoque y color con controles en lugar de editar CSS en bruto a mano.
Retroalimentación visual — Ve la sombra en una caja de vista previa para que obtengas el aspecto que deseas antes de copiar el código.
Múltiples sombras — Apila varias sombras (por ejemplo, una sombra ambiental suave más una más nítida) y copia una sola declaración de box-shadow.
Ajustes preestablecidos — Comienza desde Suave, Medio, Duro, Inset o Capas y ajusta desde allí.
Sin registro — Gratis, del lado del cliente y funciona sin conexión una vez que se carga la página.
Cómo funciona la herramienta
- Usa la vista previa para ver la sombra actual (y opcionalmente cambia el fondo de la vista previa).
- Edita cada sombra: desplazamiento X/Y, desenfoque, expansión, color (selector o hex/rgba) e Inset.
- Añade o quita sombras para construir efectos en capas.
- Copia el CSS de la salida y pégalo en tu proyecto.
- Prueba ajustes preestablecidos (Suave, Medio, Duro, Inset, Capas) para iniciar un estilo.
Sintaxis: box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Múltiples sombras están separadas por comas.
Casos de uso
Tarjetas y paneles — Sombras suaves para levantar contenido de la página.
Botones — Profundidad sutil por defecto, o inset para un estado presionado.
Modales y menús desplegables — Sombras en capas para elevación y separación del fondo.
Imágenes — Una sombra ligera para enmarcar o flotar imágenes.
Preguntas frecuentes
¿Qué es inset?
Una sombra de caja inset se dibuja dentro de la caja de borde del elemento, como un efecto hundido o presionado. Úsala para entradas, botones presionados o paneles hundidos.
¿Puedo usar múltiples sombras?
Sí. Añade más sombras con "Agregar sombra". Se apilan en orden; la primera está en la parte superior. Combina múltiples sombras para una profundidad en capas o mezcla inset y outset.
Prueba el CSS Box Shadow Generator
CSS Box Shadow Generator
Generate CSS box-shadow values visually. Set offset, blur, spread, color, and inset. Add multiple shadows and copy the CSS instantly.
The CSS Box Shadow Generator is free, works in your browser, and requires no sign-up. Adjust offset, blur, spread, color, and inset, add multiple shadows if you like, and copy the CSS with one click — perfect for cards, buttons, and UI depth.
Related Tools
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Color Contrast Checker — Check contrast ratios for accessibility
- Color Shades Generator — Generate lighter and darker shades from a base color
- Font Pairing — Preview and test typography combinations