Generador de box-shadow multicapa
Combina varias capas de sombra para crear box-shadow CSS con volumen
Superponer varias capas de box-shadow consigue un efecto mucho más suave y con más profundidad que una sombra simple. Aquí ajustas por separado la posición, el desenfoque, el color y la opacidad de cada capa, ves el resultado al instante en la vista previa y copias el CSS terminado para pegarlo en tu proyecto. Todo se calcula en tu navegador y nada se envía a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Empieza eligiendo un preajuste: sombra suave, resplandor neón o 3D retro.
- Selecciona en la lista la capa que quieras editar y mueve los deslizadores de desplazamiento X/Y, desenfoque, extensión y opacidad.
- Cambia el color de la sombra con el selector o escribiendo el código hex, y activa la sombra interior (inset) si la necesitas.
- Añade más capas con el botón «+ Añadir capa» y copia el CSS resultante.
Preguntas frecuentes
- ¿Cuántas capas puedo añadir?
- Las que quieras, sin límite. Eso sí, cuando solo queda una capa ya no se puede eliminar.
- ¿Puedo usar el CSS generado directamente?
- Sí: se copia con el formato box-shadow: ..., así que solo tienes que pegarlo en tu hoja de estilos o en el atributo style.
- ¿Si modifico los valores después de elegir un preajuste, este cambia?
- No. El preajuste es solo un punto de partida; a partir de ahí puedes retocar los deslizadores libremente para crear tu propia sombra.