Generador de Box Shadow CSS
Crea valores de box-shadow en CSS de forma visual. Previsualiza en tiempo real y copia el CSS generado.
box-shadow: 0px 8px 16px 0px #00000033;
¿Qué es el Generador de Box Shadow CSS?
La propiedad box-shadow de CSS acepta desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Se pueden apilar varias sombras para efectos por capas. Este generador visual produce el CSS para cualquier combinación: útil para botones, tarjetas y efectos de profundidad.
Preguntas frecuentes
¿Cómo apilo varias sombras?▼
Sepáralas con comas en el valor de box-shadow. Apilarlas crea una profundidad más realista que una sola sombra.
¿Cuál es la diferencia entre desenfoque y expansión?▼
El desenfoque (blur) suaviza los bordes de la sombra; la expansión (spread) amplía o reduce el tamaño de la sombra antes de desenfocarla.
Herramientas relacionadas
Color Converter (HEX/RGB/HSL)
Convert colors between HEX, RGB, HSL, OKLCH.
CSS Gradient Generator
Build linear and radial CSS gradients.
Cubic Bezier Generator
Build CSS easing curves visually.
Color Palette Generator
Generate harmonious color palettes from any base color.
CSS Border Radius Generator
Build complex CSS border-radius visually.
CSS Clamp Generator
Generate responsive CSS clamp() functions.