6XC

Gerador de Sombra CSS (Box Shadow)

Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real.

817 visualizações

A propriedade box-shadow

Sintaxe: box-shadow: x y desfoque expansão cor. Os deslocamentos movem a sombra, o desfoque suaviza sua borda, a expansão a aumenta ou encolhe, e a cor geralmente traz alfa (por exemplo rgba(0,0,0,0.15)) para dar realismo. Adicione inset para desenhar a sombra dentro da caixa. Sombras suaves e de baixa opacidade com um pequeno deslocamento em y parecem as mais naturais.

Perguntas Frequentes

Qual a diferença entre desfoque e expansão?

O desfoque suaviza a borda da sombra sem mudar seu tamanho; a expansão aumenta (ou encolhe com valores negativos) a sombra em todas as direções antes do desfoque ser aplicado.

Como faço uma sombra elegante e moderna?

Mantenha x em 0, y pequeno (2-8px), desfoque generoso (10-30px) e opacidade baixa (0,08-0,2). Sobrepor duas sombras — uma estreita e outra ampla — adiciona profundidade.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar Gerador de Borda CSS Desenhe uma borda visualmente — espessura, estilo (solid, dashed, dotted, double…), cor e raio — com pré-visualização em tempo real. Gerar