Box Shadow
Generator
Desenhe box-shadows CSS perfeitas com pré-visualização em tempo real. Ajuste offset, blur, spread e cor — empilhe múltiplas camadas para profundidade.
① Ajuste X, Y, blur, spread ② Adicione até 3 camadas ③ Copie o CSS
box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);Os offsets X e Y controlam a direção da sombra. X positivo empurra para a direita, negativo para a esquerda. Y positivo empurra para baixo.
O raio de desfoque suaviza as bordas da sombra (0 = nítido). Spread expande ou contrai a sombra além dos limites do elemento.
As sombras inset aparecem dentro do elemento, criando um efeito recuado em vez de uma sombra exterior.
CSS box-shadow — como funciona e quando usar
A propriedade CSS box-shadow adiciona efeitos de sombra ao redor do quadro de um elemento. Aceita offset horizontal (X), vertical (Y), raio de desfoque, raio de expansão e cor. Use rgba() com opacidade parcial (0.1–0.25) para sombras suaves e realistas. A palavra-chave inset coloca a sombra dentro do elemento para efeitos de botão pressionado. Empilhe múltiplas sombras com valores separados por vírgulas para obter níveis de elevação do Material Design ou efeitos de neumorfismo. box-shadow não afeta o layout e é GPU-composited — ao contrário de filter: drop-shadow(), que segue o canal alfa.