Generador de sombras CSS (box-shadow)
Diseña sombras CSS multicapa con vista previa en vivo. Controla offset, blur, spread, color e inset — y copia el código. Gratis, sin registro.
CSS generado
✨ Presets de sombra
Haz clic en cualquier preset para cargarlo en el generador y empezar a experimentar.
¿Qué es CSS box-shadow?
La propiedad CSS box-shadow añade uno o más efectos de sombra al marco de un elemento. Cada sombra se define por: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y un color. La palabra clave opcional inset mueve la sombra al interior del elemento. Puedes apilar múltiples sombras separadas por comas para simular profundidad y elevación realistas.
Preguntas frecuentes
¿Cómo consigo un efecto de resplandor suave?
Pon ambos offsets en 0, aumenta el radio de desenfoque (ej. 40px), deja el spread en 0 y usa un color semitransparente o vivo. Experimenta con la transparencia alpha en el selector de color.
¿Puedo crear sombras estilo neumorfismo?
¡Sí! Usa el preset Neumorfismo de arriba para ver un ejemplo listo. La técnica usa dos sombras: una clara (blanca/más clara que el fondo, offset arriba-izquierda) y una oscura (más oscura, offset abajo-derecha). La clave es que el color de la caja y el fondo sean idénticos.
¿El box-shadow afecta al layout?
No. A diferencia de border, box-shadow no ocupa espacio en el layout. El radio de expansión hace crecer la sombra visualmente pero no desplaza otros elementos.