🔲
Generador de Box Shadow
Crea sombras CSS visualmente con nuestro generador. Ajusta desenfoque, extensión, color y desplazamiento. Copia el código.
Incrustar esta herramienta en tu sitio web
×
px
🔥 Herramientas populares
ℹ️ Acerca de Box Shadow Generator
Disena sombras CSS con un editor visual. Ajusta desenfoque, extension, desplazamiento y color.
💡 Casos de uso
Agregando profundidad a tarjetas y contenedores
Creando efectos hover para botones
Disenando elementos UI modernos
Haciendo que elementos resalten del fondo
Experimentando con estilos de sombra
📋 Cómo usar
1
Ajusta desplazamiento horizontal y vertical
2
Configura radio de desenfoque y extension
3
Elige color de sombra y opacidad
4
Copia el codigo CSS generado
💎 Consejos Pro
- Sombras sutiles se ven mas naturales (baja opacidad, poco desenfoque)
- Usa multiples sombras para profundidad
- Las sombras internas crean efectos de presion
❓ Preguntas frecuentes
Extension expande o contrae el tamano de la sombra mas alla del elemento.
Que tan suaves o definidos aparecen los bordes. Mayor = mas suave.
Si! Apila multiples valores box-shadow separados por comas.