Generador de box-shadow CSS
Genera CSS box-shadow con vista previa en vivo. Ajusta desplazamiento, desenfoque, extensión, color y opacidad, luego copia el código.
Vista previa
Parámetros
Desplazamiento X (px)
Desplazamiento Y (px)
Desenfoque (px)
Extensión (px)
Color
Opacidad
CSS generado
Acerca de esta herramienta
Herramienta gratuita en línea para generar CSS box-shadow dirigida a desarrolladores front-end. La propiedad CSS box-shadow añade una o más sombras a un elemento. Cada sombra se define por desplazamiento horizontal (offset-x), vertical (offset-y), radio de desenfoque, extensión y color. La palabra clave opcional "inset" dibuja la sombra hacia dentro. Aquí puede ajustar todos los parámetros con sliders y selector de color, ver el resultado en tiempo real en la caja de vista previa y copiar el CSS generado (ej. box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) a su hoja de estilos. No requiere instalación; todo se ejecuta en el navegador.
Cómo usar
1. Ajustar parámetros: use los sliders o campos numéricos para Desplazamiento X (horizontal), Desplazamiento Y (vertical), Desenfoque y Extensión. Elija el color de la sombra con el selector de color o un valor HEX (ej. #000000) y la opacidad (0–1). Marque "Inset" si desea sombra interior.
2. Vista previa: la caja de ejemplo superior se actualiza en tiempo real. Compruebe el efecto antes de copiar.
3. Copiar código: cuando esté conforme, haga clic en "Copiar código" para copiar el CSS box-shadow al portapapeles y péguelo en su archivo CSS o estilos en línea.