Generador de sombras de caja

Diseñe cajas de sombras en capas con desplazamiento, desenfoque, extensión y color. Obtenga una vista previa en una tarjeta y luego copie el CSS con un solo clic.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

Diseñe cajas de sombras en capas con desplazamiento, desenfoque, extensión y color; vista previa en vivo incluida.
Se ejecuta en tu navegador
Gratis para usar

Cómo usar

Ajuste el desplazamiento, el desenfoque y la extensión.
Elija color y opacidad (o agregue capas).
Copie el CSS de sombra de cuadro.

How this tool works

Ajuste el desplazamiento, el desenfoque y la extensión.
Elija color y opacidad (o agregue capas).
Copie el CSS de sombra de cuadro.

Recommended settings

Utilice primero las opciones predeterminadas y luego ajústelas si es necesario

Supported formats

Text / on-page input

File size and limits

Las vistas previas multicapa muy complejas pueden parecer más lentas en teléfonos más antiguos.

Privacy

Los generadores de color y CSS se ejecutan completamente en su navegador. Las vistas previas y las conversiones nunca cargan tus estilos.

Common use cases

Utilice Box Shadow Generator siempre que lo necesite: diseñe sombras de cuadro en capas con desplazamiento, desenfoque, extensión y color; vista previa en vivo incluida.