Gerador de Box Shadow CSS – Sombras em Camadas, Internas e Suaves

Como usar: Gerador de Box Shadow

1Comece com uma predefinição como Suave, Em camadas ou Interna, ou ajuste a sombra padrão.

2Arraste os controles deslizantes para deslocamento horizontal e vertical, desfoque, expansão e opacidade, e escolha a cor da sombra.

3Adicione mais camadas para uma profundidade realista e defina o raio da borda e as cores de visualização.

4Copie o CSS e cole-o na sua folha de estilos.

Crie sombras CSS visualmente

As sombras dão profundidade às interfaces: elas destacam cards na página, mostram qual botão foi pressionado e separam um modal do conteúdo atrás dele. A propriedade CSS box-shadow é poderosa, mas seus cinco números são difíceis de ajustar às cegas. Este gerador oferece controles deslizantes e visualização em tempo real, permite empilhar várias sombras para um visual natural e gera um CSS limpo que você pode colar direto no seu projeto.

Recursos

Controles de deslocamento, desfoque, expansão, cor e opacidade com visualização instantânea.
Até cinco camadas combinadas em uma única declaração de box-shadow.
Sombras internas para efeitos de pressionado e rebaixado.
Raio da borda e cores de visualização para combinar com o seu design.
Predefinições para sombras suaves, médias, duras, em camadas, internas e efeitos de brilho (glow).
CSS pronto para copiar com cores no formato rgba().

Exemplo

Uma sombra em camadas que parece natural em fundos claros:

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Dicas de design de sombras

Objetivo	Configurações sugeridas
Card sutil no branco	y 4, desfoque 12, opacidade 8%
Dropdown ou modal flutuante	2–3 camadas, y até 24, desfoque até 48, opacidade 7–12% cada
Visual "flat" retrô	x 6, y 6, desfoque 0, opacidade 100%
Efeito de foco ou brilho	x 0, y 0, desfoque 16–24, expansão 2–4, cor da marca
Campo de input pressionado	inset, y 2, desfoque 6, opacidade 25–30%

Mantenha a fonte de luz consistente: se as sombras caem para baixo em um componente, elas devem cair para baixo em todos os outros.

Ferramentas relacionadas

Crie o plano de fundo dos seus cards com o Gerador de Gradiente CSS, converta cores entre HEX, RGB e HSL com o Conversor de Cores, ou selecione cores de uma captura de tela com o Seletor de Cores de Imagem.

Perguntas frequentes

O que significam os quatro valores do box-shadow?

Na ordem, são o deslocamento horizontal (positivo move a sombra para a direita), o deslocamento vertical (positivo move para baixo), o raio de desfoque (quanto maior, mais suave) e a propagação (positivo deixa a sombra maior que o elemento, negativo deixa menor). A cor vem por último.

Por que usar várias camadas de sombra?

Sombras reais são nítidas e escuras perto do objeto, e suaves e fracas mais longe. Sobrepor duas ou três sombras aumentando o deslocamento e o desfoque, mas com baixa opacidade, imita esse efeito e fica muito mais natural do que uma única sombra forte.

O que é uma sombra interna (inset)?

Uma sombra interna é desenhada dentro do elemento em vez de fora, dando a impressão de estar pressionado. É muito usada em campos de texto, botões pressionados e áreas rebaixadas.

Por que minha sombra parece cinza em um fundo colorido?

Sombras pretas parecem opacas em superfícies coloridas. Tente usar um tom mais escuro da cor de fundo para a sombra em vez de preto puro — o resultado fica mais rico e natural.

O box-shadow afeta o desempenho?

Poucas sombras não pesam. Porém, raios de desfoque muito grandes em vários elementos, ou animar o box-shadow ao rolar a página, podem causar lentidão em celulares mais básicos. Para animar uma sombra, altere a opacidade de um pseudo-elemento que contenha essa sombra.