Gerador de Box Shadow CSS
Crie efeitos de box-shadow visualmente com visualização em tempo real. Adicione múltiplas camadas de sombra, ajuste cada parâmetro e copie o CSS.
O Que É um Gerador de Box Shadow CSS?
Um gerador de box-shadow CSS ajuda você a criar efeitos de sombra para elementos HTML sem escrever código manualmente. Você ajusta parâmetros como offset horizontal/vertical, raio de blur, spread, cor e opacidade usando controles visuais, e a ferramenta gera o valor exato da propriedade CSS para você.
Como Criar um Box Shadow
- Ajuste os offsets — Use os sliders X e Y para posicionar a sombra
- Defina o blur & spread — Controle a suavidade e o tamanho da sombra
- Escolha uma cor — Escolha a cor da sombra e ajuste sua opacidade
- Ative o inset — Alterne entre sombra externa e interna
- Adicione camadas — Empilhe múltiplas sombras para efeitos complexos
- Copie o CSS — Clique no botão de copiar para obter o código final
Por Que Usar Este Gerador de Box Shadow?
- Edição Visual — Veja as mudanças na sombra em tempo real em uma caixa de visualização
- Multi-Camadas — Combine até 5 camadas de sombra para efeitos de profundidade
- Controle Preciso — Ajuste offset, blur, spread, opacidade e inset independentemente
- Output Limpo — Obtenha CSS formatado corretamente, pronto para colar na sua folha de estilo
- Privacidade — Tudo roda localmente no seu navegador
FreeToolbox vs Outros Geradores de Sombra
| Feature | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| Multi-layer | Até 5 | Única | Ilimitado |
| Inset toggle | Sim | Sim | Não |
| Opacity control | Sim | Limitado | Sim |
| Ads | Mínimo | Pesado | Nenhum |
| Dark theme | Sim | Não | Sim |
Perguntas frequentes
Qual é a diferença entre blur e spread?
Blur controla o quão suaves/difusas são as bordas da sombra. Spread controla o quanto a sombra expande ou contrai a partir do tamanho do elemento. Spread positivo a torna maior, negativo a torna menor.
Posso adicionar múltiplas sombras?
Sim. Clique em 'Adicionar Camada' para empilhar até 5 camadas de sombra. Cada camada tem controles independentes para todos os parâmetros.
O que o inset faz?
Inset move a sombra para dentro do elemento em vez de para fora, criando uma sombra interna ou um efeito de pressão.
Funciona para text-shadow também?
Esta ferramenta gera box-shadow CSS. Text-shadow usa uma sintaxe similar, mas sem o valor de spread ou a opção inset. Você pode adaptar o output manualmente.
Esta ferramenta é gratuita?
Sim, completamente gratuita, sem limites ou necessidade de registro.