Gerador de Sombras CSS Grátis

Última atualização: 12 de outubro de 2026

Resposta rápida: A propriedade box-shadow são seis valores e uma dor de cabeça: os deslocamentos, o desfoque, a expansão, a cor e o inset/outset interagem de formas quase impossíveis de imaginar só com números. Este gerador de box-shadow CSS gratuito permite ver a sombra: arraste os controles de deslocamento horizontal e vertical, desfoque e expansão, escolha uma cor e uma opacidade, ative o inset e veja a pré-visualização atualizar ao vivo. Quando estiver boa, copie o trecho de CSS limpo direto para sua folha de estilos — ou comece de um preset (cartão suave, elevado, brilho, sombra dura, interno) e ajuste. Tudo roda no seu navegador: sem bibliotecas, sem cadastro, sem espera.

Como usar Gerador de Sombras CSS

1. Arraste os controles — deslocamento horizontal/vertical, desfoque, expansão — e veja a pré-visualização atualizar ao vivo.
2. Escolha uma cor de sombra e ajuste sua opacidade; sombras escuras sutis com 15–30% de opacidade parecem mais naturais.
3. Ative o inset para empurrar a sombra para dentro da caixa (ideal para botões pressionados e campos de entrada).
4. Mude o fundo da pré-visualização para escuro e confira como a sombra se comporta no modo escuro.
5. Comece de um preset se estiver com pressa e ajuste. Clique em Copiar CSS e cole o trecho na sua folha de estilos.

Por que usar Gerador de Sombras CSS

• Pré-visualização real ao vivo — cada movimento do controle redesenha a sombra na hora; sem adivinhação nem recarregamento.
• Controle total do box-shadow — deslocamentos, desfoque, expansão, cor, opacidade e inset: todos os valores que a propriedade aceita.
• Checagem no modo escuro — mude o fundo da pré-visualização para escuro e veja se sua sombra sobrevive à troca de tema.
• Presets em um clique — cartão suave, elevado, brilho, sombra dura e interna: pontos de partida prontos para produção.
• CSS limpo e copiável — uma linha, sintaxe padrão, funciona em todos os navegadores modernos sem prefixos.
• Zero dependências — JS e CSS puros, sem bibliotecas; a página continua rápida no celular.

Casos de uso comuns

• Design de cartões e modais: Ajuste a elevação exata de cartões, diálogos e popovers — suave e próxima para UI em repouso, maior e mais difusa para camadas flutuantes.
• Estados de botões: Desenhe os estados normal, hover (sombra um pouco maior) e ativo (inset, pressionado) de um conjunto de botões com uma linguagem de sombras consistente.
• Auditorias de modo escuro: Mude a pré-visualização para escuro e reajuste: sombras que parecem sutis no branco costumam sumir ou embarrar em fundos escuros.
• Tokens de um design system: Gere os 3–5 níveis de sombra (sm/md/lg/xl) que seu design system precisa e cole direto nas suas variáveis CSS.
• Mockups para clientes: Mostre ao cliente três tratamentos de sombra no cartão hero em segundos em vez de editar CSS à mão e recarregar.

Gerador de Sombras CSS vs alternativas

• O editor de sombras do Chrome DevTools: Genuinamente bom — o painel Styles tem um editor visual de box-shadow. Mas fica enterrado no devtools, os valores somem ao fechar a aba e não há biblioteca de presets. Esta página é a mesma ideia, que dá para favoritar e compartilhar.
• As utilidades de sombra do Tailwind: Perfeitas se você usa Tailwind a fundo (shadow-lg e pronto). Inúteis para valores personalizados, projetos sem Tailwind ou quando você precisa do CSS cru para um handoff de design.
• Outros geradores de sombras online: A maioria cobre o básico, mas muitos são cheios de anúncios, não têm controle de opacidade ou não pré-visualizam em fundos escuros. Opacidade + pré-visualização escura + presets é a vantagem desta página.
• Escrever à mão: Se você já consegue imaginar 0 24px 48px -12px rgba(0,0,0,.25) na cabeça, não precisa desta ferramenta. Para todos os demais — incluindo a maioria dos profissionais — ver supera imaginar.

Se você vive no Chrome DevTools, o editor de sombras embutido já está no seu fluxo — mantenha-o. Para todos os demais, ou quando quiser presets, pré-visualização em modo escuro e um trecho limpo para colar em qualquer projeto, esta página é o caminho mais rápido da ideia ao CSS.

Perguntas frequentes