🔲
Gerador de Box Shadow
Crie sombras CSS visualmente com nosso gerador. Ajuste blur, spread, cor e offset. Copie o código instantaneamente.
Incorporar esta ferramenta no seu site
×
px
🔥 Ferramentas populares
ℹ️ Sobre Box Shadow Generator
Projete sombras CSS com um editor visual. Ajuste desfoque, expansao, deslocamento e cor.
💡 Casos de uso
Adicionando profundidade a cards e containers
Criando efeitos hover em botoes
Desenhando elementos de UI modernos
Fazendo elementos se destacarem do fundo
Experimentando estilos de sombra
📋 Como usar
1
Ajuste o deslocamento horizontal e vertical
2
Defina o raio de desfoque e expansao
3
Escolha a cor e opacidade da sombra
4
Copie o codigo CSS gerado
💎 Dicas Pro
- Sombras sutis parecem mais naturais (baixa opacidade, leve desfoque)
- Use multiplas sombras para profundidade
- Sombras internas criam efeitos de pressionado
❓ Perguntas frequentes
Expansao amplia ou contrai o tamanho da sombra alem do elemento.
Quao suave ou dura as bordas da sombra aparecem. Maior = mais suave.
Sim! Empilhe varios valores de box-shadow separados por virgulas.