Gerador Box Shadow CSS Grátis: Sombra de Caixa Visual Online
99 usos5px
5px
15px
0px
30%
Dicas Box Shadow
Ajustar visualmente
Controles para X, Y, blur, spread e cor. Preview em tempo real.
Copiar CSS
Código gerado automaticamente. Copie com um clique.
Sombra interna (inset)
Ative inset para sombra interior.
Perguntas Frequentes
Como criar sombra CSS?
Ajuste controles: offset, blur, spread, cor. Atualiza em tempo real.
O que é inset?
Sombra para dentro da caixa.
Posso copiar?
Sim, código CSS com um clique.
Posso animar transições de sombra sem lag?
Sim, mas só se você animar opacidade ou cor. Animar as posições — como deslocamento ou desfoque — força o navegador a recalcular o layout a cada frame. Isso acaba com a performance no celular. Fique nas transições de opacidade ou use um pseudo-elemento pra um movimento mais suave. Teste no preview ao vivo do gerador antes de aplicar.
Posso usar múltiplas sombras em um único elemento?
Sim, basta separá-las por vírgulas no gerador. Clique em "Adicionar Sombra" para criar outra camada. Duas sombras com deslocamentos diferentes criam um efeito de cartão elevado — uma suave e profunda, a outra mais nítida. A prévia ao vivo exibe todas as camadas em tempo real.
Existe diferença entre box-shadow e filter: drop-shadow?
Sim, e eles não são intercambiáveis. box-shadow cria um retângulo ao redor da caixa do elemento — cantos e tudo. filter: drop-shadow segue o formato real do conteúdo. Uma PNG transparente com bordas irregulares ganha uma sombra perfeitamente contornada. Use box-shadow para cards, botões e componentes de UI. Prefira drop-shadow para logotipos ou imagens recortadas. Teste aqui: aplique box-shadow a um elemento circular, depois troque por drop-shadow no seu CSS. A diferença fica nítida na hora.
Como Usar
- Ajuste offset X e Y
- Configure blur e spread
- Escolha cor
- Ative inset
- Copie CSS