Por FreeWebTools Editorial Team Atualizado em 23 de agosto de 2026

🔲

Gerador de Box Shadow

Crie sombras CSS visualmente com nosso gerador. Ajuste blur, spread, cor e offset. Copie o código instantaneamente.

Pré-visualização

Camadas ()

Predefinições

Layer

Deslocamento horizontal: px

Deslocamento vertical: px

Raio de desfoque: px

Raio de expansão: px

Cor da sombra

Opacidade: %

Interior

Código CSS

Incorporar esta ferramenta no seu site

× px

Tema

Cor

Fundo

Borda

Cor da borda

Raio da borda

Mostrar marca Permitir tela cheia Modo compacto Ativar animações Fundo transparente

👁️ Pré-visualização

💡 Dica de integração

Copie o código de incorporação e cole no HTML do seu site. A versão responsiva se adapta automaticamente a todos os tamanhos de tela.

0 avaliação

Avalie esta ferramenta

✓

Sobre Gerador de Box Shadow

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 botões

Desenhando elementos de UI modernos

Fazendo elementos se destacarem do fundo

Experimentando estilos de sombra

Como usar

Ajuste o deslocamento horizontal e vertical

Defina o raio de desfoque e expansao

Escolha a cor e opacidade da sombra

Copie o código 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 além do elemento.

Quao suave ou dura as bordas da sombra aparecem. Maior = mais suave.

Sim! Empilhe vários valores de box-shadow separados por vírgulas.

Ferramentas populares

Não há mais ferramentas

Explorar todas as ferramentas