Generador de sombras de cajas.
Herramienta gratuita de generación de CSS con sombras de cajas en línea, con vista previa en tiempo real.
Sintaxis CSS box-shadow
La propiedad CSS box-shadow agrega efectos de sombra alrededor de un elemento. Sintaxis: box-shadow: [inset] offset-x offset-y blur spread color. Multiples sombras pueden separarse por comas. Usa el editor visual para ajustar valores y ver el resultado en tiempo real.
Como usar el generador de sombras de caja
Ajusta los controles deslizantes para offset X, offset Y, radio de desenfoque y radio de propagacion. Elige un color de sombra y activa la opcion inset. El codigo CSS generado se actualiza en tiempo real y puede copiarse al portapapeles.
▶Cual es la diferencia entre blur y spread?
Blur controla que tan suaves son los bordes de la sombra (0 = borde nitido, valores mayores = mas suave). Spread expande o contrae la sombra en todas direcciones. Spread positivo hace la sombra mas grande que el elemento.
▶Puedo agregar multiples sombras?
Si, CSS soporta multiples sombras separadas por comas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Combina sombras sutiles para un efecto de profundidad mas realista.
▶Que hace la sombra inset?
Una sombra inset aparece dentro del elemento en lugar de fuera. Crea la impresion de que el elemento esta presionado hacia adentro, como un campo de texto o depresion de boton.
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.