Resumen
Este generador de sombra de caja te ayuda a crear sombras CSS precisas con vista previa en vivo y salida de código instantánea. Es útil para botones, tarjetas, diálogos, imágenes y otros elementos de interfaz que necesitan profundidad y separación visual.
Casos de uso
- Diseñar sombras para tarjetas, botones y modales.
- Crear efectos de elevación sutiles para dashboards y landing pages.
- Generar sombras inset para campos de formulario y paneles.
- Probar distintos estilos de sombra rápidamente sin tocar CSS a mano.
Como funciona
- 1
Define el desplazamiento horizontal y vertical.
- 2
Ajusta el desenfoque, la expansión y la opacidad según el estilo que buscas.
- 3
Elige el color de la sombra y, si quieres, el modo inset.
- 4
Previsualiza la sombra en tiempo real mientras editas.
- 5
Copia el CSS generado y pégalo en tu hoja de estilos.
Ejemplos
Sombra suave para tarjeta
Entrada: 0 8px 24px 0 rgba(0,0,0,0.12)
Salida: box-shadow: 0 8px 24px 0 rgba(0,0,0,0.12);
Una sombra suave para tarjetas y bloques de contenido.
Sombra marcada para botón
Entrada: 0 4px 12px -2px rgba(0,0,0,0.25)
Salida: box-shadow: 0 4px 12px -2px rgba(0,0,0,0.25);
Una sombra más definida para elementos interactivos.
FAQ
¿Qué propiedad CSS genera esta herramienta?
Genera valores box-shadow que puedes usar directamente en CSS.
¿Puedo crear sombras inset?
Sí. Activa el modo inset para generar una sombra interior.
¿La salida está lista para copiar?
Sí. El CSS generado está preparado para copiar y pegar rápidamente.
¿Admite varias sombras?
Sí, puedes combinar valores manualmente si necesitas más de una capa de sombra.