Generador de box-shadow CSS
Ajusta la sombra con controles deslizantes y copia el código box-shadow al instante
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Una herramienta para diseñar sombras ajustando con controles deslizantes el desplazamiento, el desenfoque, la expansión, el color, la opacidad e inset, con vista previa en tiempo real. Puedes copiar directamente el CSS de box-shadow ya listo, algo muy práctico para diseñadores web y desarrolladores frontend que quieren crear rápidamente sombras para tarjetas o botones.
Cómo usar
- Ajusta con los controles deslizantes el desplazamiento horizontal y vertical, el desenfoque (blur), la expansión (spread) y la opacidad.
- Elige el color de la sombra y, si lo necesitas, activa inset (sombra interior).
- Comprueba el resultado en el recuadro de vista previa.
- Copia el código box-shadow generado y úsalo.
Preguntas frecuentes
- ¿Qué es inset?
- Al activar inset, la sombra se proyecta hacia el interior del elemento en lugar de hacia fuera, creando un efecto hundido. Se usa mucho para campos de entrada o botones pulsados.
- ¿Puedo superponer varias sombras?
- Esta herramienta crea una sola sombra. Si necesitas varias, puedes unir los valores generados separándolos con comas en una misma propiedad box-shadow.
- ¿Se guardan en un servidor los valores que introduzco?
- No. La vista previa y la generación del CSS se procesan por completo en el navegador; ningún valor se envía a ningún servidor.