Generador de sombras CSS multicapa
Combina varias sombras CSS para lograr profundidad y volumen
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Superponer varios valores de box-shadow crea una sensación de profundidad mucho más suave y realista que una sola sombra, la misma técnica que usan Figma y los frameworks de diseño de interfaces modernos. Ajusta el desplazamiento, desenfoque, expansión, color y opacidad de cada capa mientras ves el resultado en la vista previa, y luego copia el código CSS listo para usar. Todo se procesa en tu navegador, sin enviar nada a ningún servidor.
Cómo usar
- Elige un punto de partida entre los estilos Sombra suave, Resplandor de neón o Retro 3D.
- Selecciona una capa de la lista y ajusta sus controles de desplazamiento X/Y, desenfoque, expansión y opacidad.
- Cambia el color de la sombra con el selector de color o el código hexadecimal, y activa la sombra interior si la necesitas.
- Añade más capas con “+ Añadir capa” y copia el código CSS generado.
Preguntas frecuentes
- ¿Cuántas capas puedo añadir?
- No hay límite, puedes añadir tantas como quieras. Solo no se puede eliminar la última capa restante.
- ¿Puedo usar el CSS generado directamente?
- Sí, se genera como una declaración box-shadow: ... lista para pegar en tu hoja de estilos o atributo style.
- ¿Editar los valores después de elegir un estilo cambia el estilo original?
- No, los estilos son solo un punto de partida; una vez cargados puedes ajustar los controles libremente para crear tu propia sombra.