Roda no navegador • Nada é enviado

Gerador de Box Shadow CSS

Ajuste deslocamento, desfoque, espalhamento, cor e opacidade da sombra, veja a prévia e copie o box-shadow.

Anatomia do box-shadow

A propriedade box-shadow recebe, nesta ordem: deslocamento horizontal (X), vertical (Y), desfoque, espalhamento e cor. O prefixo inset joga a sombra para dentro. Sombras suaves (desfoque alto, opacidade baixa) dão profundidade discreta a cartões e botões.

Perguntas frequentes

Posso ter várias sombras?

Sim, separando por vírgula. Empilhar duas sombras (uma curta e nítida, outra longa e suave) cria um efeito de elevação mais realista.

Outras ferramentas