Gerador de box-shadow CSS
Crie box-shadow CSS visualmente: empilhe várias camadas, defina deslocamentos, desfoque, expansão, inset e opacidade RGBA, veja a prévia ao vivo e copie código limpo.
Predefinições
Camadas
Configurações da pré-visualização
Pré-visualização
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Ferramentas Relacionadas
Ver TodasO que é Gerador de box-shadow CSS?
Um editor visual para a propriedade CSS box-shadow. Você pode empilhar várias camadas de sombra, dar a cada uma o próprio deslocamento, desfoque, expansão, cor, opacidade e opção inset, e ver o resultado em uma caixa de exemplo enquanto a ferramenta escreve o CSS correspondente.
Como usar Gerador de box-shadow CSS
- Escolha uma predefinição (Suave, Em camadas, Dura, Brilho, Interna, Anel) ou comece pela sombra padrão.
- Selecione uma camada e ajuste o deslocamento horizontal, o deslocamento vertical, o desfoque, a expansão, a cor da sombra e a opacidade; marque Inset para uma sombra interna.
- Use Adicionar camada / Remover camada para montar sombras em várias camadas; as camadas aparecem na ordem de pintura.
- Altere o fundo, a cor do elemento e o raio nas configurações da prévia para avaliar a sombra no contexto.
- Copie o código CSS gerado.
Exemplo
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
Quando usar Gerador de box-shadow CSS
Use-o para criar elevação de cards, anéis de foco, brilhos ou sombras internas em qualquer elemento HTML. Para sombras em texto, use o Gerador de text-shadow; para sombras que seguem o formato de um PNG transparente ou de um elemento recortado, use filter: drop-shadow() (Gerador de filtros CSS), porque o box-shadow sempre segue a caixa de borda do elemento.
Como funciona Gerador de box-shadow CSS
Cada camada vira um valor de box-shadow na ordem [inset] x y blur spread color. Os comprimentos são escritos em px (zero como 0 sem unidade). O controle de opacidade é multiplicado pelo alfa da própria cor: cores totalmente opacas são escritas em hex e as translúcidas como rgba(r, g, b, a). Várias camadas são unidas por vírgulas, uma por linha; a primeira camada é pintada por cima. O desfoque não pode ser negativo; a expansão pode.
Casos de Uso Comuns
- Elevação em camadas no estilo Material para cards e modais
- Anéis de foco acessíveis com uma sombra só de expansão (0 0 0 3px)
- Sombras internas para botões pressionados e campos de formulário
- Brilhos coloridos ao redor de botões de chamada para ação
- Sombras duras deslocadas para designs neobrutalistas
Perguntas Frequentes
Em que ordem várias sombras são desenhadas?
A primeira sombra da lista é pintada por cima e a última por baixo. A ferramenta escreve as camadas na ordem mostrada no painel de camadas.
Qual a diferença entre desfoque e expansão?
O desfoque suaviza a borda da sombra (não pode ser negativo). A expansão aumenta ou diminui a sombra antes do desfoque; uma expansão negativa deixa a sombra menor que o elemento.
Ainda preciso de -webkit-box-shadow?
Não. O box-shadow sem prefixo é suportado por todos os navegadores há mais de uma década, então a ferramenta gera apenas a propriedade padrão.
Por que a sombra não aparece ao redor da minha imagem transparente?
O box-shadow segue a caixa retangular do elemento (incluindo o border-radius), não os pixels visíveis. Para isso, use filter: drop-shadow().