Gerador CSS Box Shadow
O que esta ferramenta faz
Ajuste deslocamento X/Y, desfoque, expansão, cor e opacidade com controles deslizantes e veja a sombra atualizar em tempo real. Alterne Interno para sombras externas ou internas. Adicione múltiplas camadas para efeitos de profundidade. Aplique uma predefinição para começar rapidamente e copie o CSS com um clique.
Como usar
- Escolha uma predefinição ou comece com o padrão.
- Ajuste os controles de deslocamento, desfoque, expansão e opacidade.
- Clique no swatch de cor para mudar a cor da sombra.
- Alterne Interno para sombras internas. Use + Adicionar Camada para profundidade.
- Clique em Copiar para copiar o CSS gerado.
Perguntas Frequentes
O que é CSS box-shadow?
A propriedade CSS `box-shadow` adiciona sombras ao redor de um elemento. A sintaxe completa é `box-shadow: [inset] x-offset y-offset blur spread color`. Várias sombras podem ser empilhadas separando-as por vírgulas.
O que faz a opção Interno?
Com Interno (inset) ativado, a sombra aparece dentro do elemento, e não fora. Isso cria um efeito afundado ou pressionado, usado em brilhos internos ou botões pressionados.
O que é o valor de Expansão?
A expansão (spread) aumenta ou reduz a sombra antes de aplicar o desfoque. Um valor positivo deixa a sombra maior que o elemento; um negativo a encolhe. Expansão 0 significa sombra do mesmo tamanho do elemento.
Como crio sombras em várias camadas?
Clique em '+ Adicionar Camada' para criar uma nova sombra. Cada camada tem seus próprios deslocamento, desfoque, expansão, cor e opacidade. As camadas são unidas por vírgulas no CSS gerado, o que é CSS padrão e funciona em todos os navegadores modernos.
Qual a diferença entre box-shadow e drop-shadow?
O box-shadow se aplica à caixa retangular do elemento e ignora a transparência. O `filter: drop-shadow()` acompanha a forma visível do elemento (incluindo áreas transparentes), sendo melhor para elementos não retangulares, como SVGs ou PNGs com fundo transparente.