🔲 Generador de Box-Shadow CSS
Obtén tu código CSS box-shadow en segundos — sin instalación, sin cuenta, sin internet. Mueve los controles para ajustar desplazamiento, desenfoque, dispersión, color y opacidad de cada capa, observa la vista previa en vivo y copia el CSS listo para pegar.
Preview
Acerca de
Esta herramienta funciona completamente en tu navegador con JavaScript puro — tus diseños nunca salen de tu dispositivo. Puedes apilar varias capas de sombra para crear efectos de profundidad, neumorfismo, resplandor o elevaciones sutiles de tarjetas. Cada capa admite sombras inset para efectos de brillo interior o botones presionados. La salida es CSS estándar que puedes insertar directamente en cualquier hoja de estilos, framework o token de diseño.
Cómo usar
- Haz clic en '+ Añadir sombra' para crear tu primera capa de sombra.
- Usa los controles de Desplazamiento X, Desplazamiento Y, Desenfoque, Dispersión y Opacidad para dar forma a cada sombra. Activa 'Inset' para un efecto de sombra interior.
- Haz clic en la muestra de color para elegir el color de la sombra. La vista previa en vivo se actualiza con cada ajuste.
- Agrega más capas para efectos de sombra múltiple complejos como neumorfismo o resplandores apilados.
- Haz clic en 'Copiar CSS' para obtener la declaración box-shadow completa y pegarla en tu hoja de estilos.
Preguntas frecuentes
- ¿Este generador de CSS box-shadow es gratuito?
- Sí, completamente gratis. Sin cuenta, sin período de prueba, sin costes ocultos — abre la página y empieza a crear sombras.
- ¿Funciona sin conexión a internet?
- Sí. La herramienta funciona completamente en tu navegador sin llamadas al servidor. Una vez cargada la página, puedes desconectarte de internet y seguirá funcionando perfectamente.
- ¿Mis datos de diseño son privados? ¿Se sube algo a un servidor?
- No se sube nada. Toda la configuración de sombras se procesa localmente en tu navegador y se guarda solo en el localStorage. Ningún dato sale de tu dispositivo.
- ¿Puedo apilar varias sombras en una sola regla CSS?
- Sí. Haz clic en '+ Añadir sombra' tantas veces como necesites. La herramienta combina todas las capas en un único valor box-shadow separado por comas — perfecto para neumorfismo, efectos de resplandor o profundidad multidireccional.
- ¿Cómo creo un efecto de sombra interior (inset)?
- Marca la casilla 'Inset' en cualquier capa de sombra. Una sombra inset aparece dentro del borde del elemento, útil para estados de botón presionado o efectos de brillo interior. El CSS generado incluye la palabra clave 'inset' automáticamente.