DevToolPal
PT

Gerador de sombras CSS (box-shadow)

Crie sombras CSS visualmente: empilhe várias camadas, ajuste deslocamento, desfoque, expansão, cor e inset, com pré-visualização ao vivo, predefinições e CSS pronto para copiar.

Roda localmente, nada é enviado

Camadas de sombra

Sem sombra. Adicione uma camada ou escolha uma predefinição.

Pré-visualização

Cor da caixa
Fundo

CSS

Predefinições
CSS do box-shadow
 
 
 
 
 
O que faz


O gerador de sombras permite desenhar sombras CSS no olho e copiar a declaração box-shadow pronta. Empilhe quantas camadas precisar, ajuste deslocamento, desfoque, expansão, cor e opacidade de cada uma, transforme-a em sombra interna e a pré-visualização é atualizada na hora. Você também pode colar um valor box-shadow existente para editá-lo visualmente. Tudo roda no seu navegador.


Como usar


    

  1. Comece por uma predefinição ou mantenha a sombra de exemplo.
    2. 

  2. Escolha uma camada nos botões Camada ou use + Adicionar camada para empilhar outra por cima.
    3. 

  3. Arraste Deslocamento horizontal, Deslocamento vertical, Desfoque e Expansão, escolha uma Cor e reduza a Opacidade para um visual mais suave. Ative Interna para uma sombra para dentro.
    4. 

  4. Ajuste a Cor da caixa, o Fundo e o Raio do canto da pré-visualização para combinar com a sua página. Eles só afetam a pré-visualização.
    5. 

  5. Copie o código do cartão CSS.
    6. 



A caixa CSS do box-shadow embaixo é editável: cole uma sombra da sua folha de estilos ou ferramenta de design e os controles a leem. Medidas em rem ou em são convertidas para px considerando 16px.


Exemplo


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Dicas para sombras naturais


    

  • Use opacidade baixa. Preto entre 5% e 25% parece realista; sombras escuras e sólidas pesam.
    • 

  • Expansão negativa impede que um desfoque grande vaze pelas laterais — é o truque da maioria das sombras de “card”.
    • 

  • Dê cor à sombra. Uma sombra com um pouco do tom do fundo ou da marca fica mais rica que o cinza puro.
    • 

  • Luz de um lado só. Mantenha o deslocamento vertical positivo em todas as camadas para que concordem sobre de onde vem a luz.
    • 

  • Desempenho. Desfoques grandes em muitos elementos podem deixar a rolagem lenta em celulares simples; anime opacity ou transform em vez da sombra.
    • 

 
  
 
Perguntas frequentes
 
 
  › O que significam os quatro números do box-shadow?  
Em ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque e raio de expansão. Deslocamentos positivos movem a sombra para a direita e para baixo. O desfoque suaviza a borda e não pode ser negativo. A expansão aumenta a sombra (positiva) ou a reduz (negativa) antes de aplicar o desfoque.
 
  › Por que usar várias camadas de sombra?  
Sombras reais são nítidas perto do objeto e somem à distância. Empilhar duas ou mais camadas, por exemplo uma pequena e nítida e outra grande e suave, fica muito mais natural que um único desfoque escuro. É assim que a maioria dos design systems monta seus níveis de elevação.
 
  › O que o inset faz?  
inset desenha a sombra dentro da caixa em vez de fora, como se o elemento estivesse afundado. É usado em campos de formulário, botões pressionados e brilhos internos. Dá para misturar camadas inset e externas no mesmo box-shadow.
 
  › O box-shadow acompanha o border-radius?  
Sim. A sombra segue o formato do elemento, incluindo cantos arredondados, por isso a pré-visualização usa o raio que você definir. Ela não acompanha partes transparentes de uma imagem; para isso use o filtro CSS drop-shadow().