Generador de CSS Box Shadow
Diseña sombras CSS con múltiples capas. Controles de offset, blur, spread, color y opacidad por capa.
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.40);
Hecho por
Miguel Ángel Colorado Marin
Hecho por
Miguel Ángel Colorado Marin
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Cómo crear sombras CSS
- 1
Elige un preset o configura desde cero
Soft, Hard, Neon, Inset y 3D como punto de partida. O ajusta directamente los deslizadores.
- 2
Controla cada capa individualmente
Offset X/Y para dirección, blur para suavidad, spread para tamaño, color con opacidad e inset para sombras internas.
- 3
Añade capas para efectos complejos
Hasta 6 capas simultáneas. Combínalas para neon glow, sombras 3D o efectos de profundidad avanzados.
- 4
Copia el CSS y pégalo en tu proyecto
El código box-shadow se genera en tiempo real. Un clic para copiarlo.
Técnicas avanzadas con box-shadow
La propiedad CSS box-shadow es más versátil de lo que parece. Combinando múltiples capas puedes crear efectos que van desde sombras suaves y realistas hasta neon glow, sombras 3D, bordes simulados sin usar la propiedad border, o incluso imágenes complejas usando solo box-shadow en un elemento vacío.
El truco del neon glow consiste en apilar dos sombras del mismo color: una con poco blur y spread alto para el núcleo brillante, y otra con blur grande y opacidad más baja para el halo difuso. El efecto 3D se consigue con una sombra oscura en la esquina opuesta a la luz y una sombra clara (o blanca con inset) en la esquina de la fuente de luz.
Preguntas frecuentes
¿Qué es la propiedad CSS box-shadow?
Añade una o más sombras a un elemento. Acepta offset X/Y, blur, spread, color y la palabra clave inset. Se pueden encadenar múltiples sombras separadas por coma.
¿Puedo añadir varias sombras al mismo elemento?
Sí. Se encadenan separadas por comas: box-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(167,139,250,0.5). Este generador produce ese código automáticamente.
¿Qué diferencia hay entre box-shadow y drop-shadow?
box-shadow afecta al rectángulo del elemento (con border-radius). filter: drop-shadow() sigue la forma real del contenido, incluyendo transparencias PNG.
¿Qué significa inset?
Convierte la sombra de exterior a interior. La sombra aparece dentro del borde del elemento, creando un efecto de hundido. Útil para inputs y efectos de profundidad invertida.
¿Las sombras CSS afectan al rendimiento?
Tienen un coste de renderizado. Para animaciones es mejor usar will-change: box-shadow o animar opacidad de un pseudo-elemento con sombra predefinida.
Herramientas relacionadas
Embebe esta herramienta
<iframe src="https://miguelacm.es/embed/css-box-shadow" width="100%" height="700" style="border:none;border-radius:16px;" loading="lazy"></iframe>