Generador de Sombras CSS
Creá sombras CSS personalizadas con vista previa en vivo.
Generador de Box Shadow CSS Gratis
El Generador de Sombras CSS de Toolts crea efectos de box-shadow con un editor visual. Ajustá desplazamientos horizontal y vertical, radio de desenfoque y expansión, color de sombra y opacidad. Alterná entre sombras exteriores e interiores. El CSS generado está listo para pegar en tu hoja de estilos.
Entendiendo Box Shadow
La propiedad CSS box-shadow agrega efectos de sombra a los elementos. La sintaxis es: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color]. El desplazamiento horizontal mueve la sombra izquierda/derecha, el vertical la mueve arriba/abajo, el radio de desenfoque controla la suavidad, y el radio de expansión controla el tamaño. Una sombra inset aparece dentro del elemento en vez de afuera.
Consejos de Diseño
Para diseño UI moderno, las sombras sutiles con baja opacidad (5–15%) funcionan mejor. Usá valores de desenfoque grandes (15–30px) con desplazamientos pequeños para sombras suaves y naturales. Múltiples sombras superpuestas pueden crear profundidad — combiná una sombra enfocada con una más difusa. Para modos oscuros, usá sombras con muy baja opacidad o sombras de colores claros.