Generador de sombras CSS
Crea box-shadow CSS con vista previa en tiempo real.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);¿Qué es box-shadow en CSS?
La propiedad box-shadow de CSS permite agregar sombras a cualquier elemento HTML. Es una de las herramientas más utilizadas en diseño web para crear profundidad, elevación y jerarquía visual. Las sombras bien aplicadas hacen que los elementos parezcan "flotar" sobre la página.
La sintaxis incluye: desplazamiento horizontal (X), desplazamiento vertical (Y), radio de desenfoque (blur), radio de extensión (spread), color y opcionalmente "inset" para sombras interiores. Puedes combinar múltiples sombras separándolas con comas.
Preguntas frecuentes
¿Qué es la propiedad inset?
Inset convierte la sombra exterior en una sombra interior. Es útil para crear efectos de profundidad, campos de texto hundidos o botones presionados.
¿Las sombras afectan al rendimiento?
Sombras simples tienen impacto mínimo. Sin embargo, sombras con blur muy alto en muchos elementos pueden afectar el rendimiento en dispositivos lentos. Usa con moderación.
¿Puedo usar múltiples sombras?
Sí, sepáralas con comas: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Esto crea efectos más realistas y sofisticados.
¿Quieres saber más? Lee nuestra guía completa →