Gerador de Box Shadow

Crie box shadows CSS visualmente. Múltiplas camadas, inset, predefinições para neumorfismo e glassmorfismo.

Gerador de Box Shadow CSS

Design multi-layer box shadows visually. Adjust offsets, blur, spread, and color per layer. Apply presets or build from scratch.

Configurações da caixa

BackgroundBox ColorRadius: 12px

Predefinições

Saída CSS

box-shadow:
    0px 4px 12px 0px rgba(0, 0, 0, 0.25);

Shadow Layers (1)

Layer 1

Inset

Offset X0px

Offset Y4px

Blur12px

Spread0px

Opacity25%

Cor#000000

Crie sombras de caixa CSS com múltiplas camadas.

1
Adicione camadasClique em Adicionar Camada para cada sombra.
2
AjusteDefina deslocamento, desfoque, espalhamento, cor e inset por camada.
3
CopieCopie o CSS de box-shadow gerado.

Um estilo de UI suave que usa sombras internas/externas sutis para um efeito elevado/pressionado. A predefinição gera as duas camadas.

O CSS suporta ilimitadas. A ferramenta suporta até 5.