Box Shadow Generator
Gerador de box shadow CSS gratuito. Ajuste offset, blur, spread, cor e inset. Visualização ao vivo e copie código CSS. Perfeito para designers e desenvolvedores.
box-shadow: 0px 4px 6px 1px #00000020;Sobre Box Shadow Generator
Box Shadow Generator é executado inteiramente no seu navegador. Seus dados permanecem no seu dispositivo — não há upload para nenhum servidor.
Gerador de box shadow CSS gratuito. Ajuste offset, blur, spread, cor e inset. Visualização ao vivo e copie código CSS. Perfeito para designers e desenvolvedores. Grátis, sem cadastro, privacidade primeiro.
Como usar Box Shadow Generator
Crie sombras CSS visualmente e copie o código instantaneamente. Ajuste desfoque, propagação, deslocamento e cor sem escrever CSS manualmente.
- 1
Defina as propriedades da sombra
Ajuste o deslocamento horizontal e vertical, o raio de desfoque e a propagação usando os controles deslizantes.
- 2
Escolha uma cor e opacidade
Escolha uma cor de sombra e defina sua opacidade. Sombras mais escuras e com menor opacidade parecem mais naturais.
- 3
Adicione inset se necessário
Ative inset para criar uma sombra interna em vez de uma externa.
- 4
Copie o CSS
Clique em Copiar para copiar o código CSS box-shadow gerado para a área de transferência.
Dicas
- •Camadas de várias sombras para profundidade — combine uma sombra nítida e escura com uma mais suave e clara.
- •Mantenha o raio de desfoque maior que a propagação para uma sombra suave e realista.
- •Sombras ficam melhores com um leve deslocamento vertical e baixa opacidade.
Ferramentas Relacionadas
Mais Ferramentas de Generators
Perguntas Frequentes
O gerador de sombras é gratuito?
Sim, nosso gerador de sombras é totalmente gratuito sem limites. Você pode criar sombras ilimitadas e copiar o código CSS instantaneamente.
Posso criar várias sombras?
Sim. Você pode camadas de várias sombras com diferentes deslocamentos, desfoques, propagações e cores para criar efeitos complexos de profundidade e brilho.
Posso copiar o código CSS?
Sim. A propriedade CSS box-shadow gerada é exibida em uma caixa de código. Clique em copiar para obter o código pronto para colar na sua folha de estilo.
O gerador de sombras funciona offline?
Sim. Toda a geração acontece no seu navegador, então a ferramenta funciona sem conexão com a internet após o carregamento da página.