Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con vista previa en vivo y código listo para copiar.
Respuesta rápida: Generador de Sombra de Caja CSS: diseña sombras de caja CSS con vista previa en directo y código listo para copiar. Funciona íntegramente en tu navegador, gratis y sin registro.
Última actualización
Bueno saber
The CSS box-shadow property takes up to four length values in a fixed order — horizontal offset, vertical offset, blur radius, spread radius — followed by a color. The order matters and is easy to misremember: a positive vertical offset pushes the shadow down, and the blur radius softens the edge while the spread radius grows or shrinks the whole shadow before it is blurred. Dragging the sliders here removes the guesswork and shows the result instantly.
For realistic depth, keep shadows subtle: a small offset, a generous blur and a low opacity read as a natural drop shadow, whereas a hard, opaque shadow looks like a 1990s bevel. A widely used technique is to stack several shadows with increasing blur to mimic how light actually diffuses — you can do that by pasting multiple declarations separated by commas, since a single box-shadow accepts a comma-separated list.
Two things to know: adding the inset keyword flips the shadow to the inside of the element, which is handy for pressed-button and inset-field effects, and box-shadow does not affect layout or the element's box size the way border does, so it never nudges neighboring elements. For rounded corners that the shadow will follow, pair this with the border-radius generator, and check any shadowed text stays legible with the contrast checker.
Preguntas frecuentes
- ¿Es gratuito el generador de sombras en caja?
- Sí — gratuito, sin registro.
- ¿Puedo añadir múltiples sombras?
- El generador emite una sola sombra; combina la salida con comas si necesitas sombras superpuestas.
- ¿Qué unidad utiliza?
- Píxeles — la unidad más común para los desplazamientos de sombras en caja.
- ¿La salida soporta inset?
- No en esta versión — establece inset en el CSS resultante a mano si lo necesitas.
- ¿Se guardan mis configuraciones?
- No — la vista previa y CSS se ejecutan completamente en tu navegador.