Gerador de Sombra CSS

O gerador de sombra CSS monta o efeito box-shadow sem que você precise decorar a sintaxe. Arraste os controles, veja o resultado ao vivo no preview e copie o CSS pronto para colar no projeto. Serve para sombras em botões, cards, menus e modais, de graça e direto no navegador.

Como usar

1. Ajuste o deslocamento X e Y: mova a sombra na horizontal e na vertical. Valores positivos empurram para a direita e para baixo; negativos, para o lado oposto.
2. Defina o desfoque (blur): quanto maior, mais suave e difusa fica a borda da sombra. Zero deixa a sombra com contorno sólido.
3. Regule o espalhamento (spread): aumente para uma sombra maior e mais densa ou use valores negativos para encolhê-la.
4. Escolha a cor e a opacidade: selecione a cor no seletor e ajuste a transparência no slider de opacidade.
5. Ative o inset (opcional): marque "Sombra interna" para que a sombra apareça dentro do elemento, criando um efeito de profundidade rebaixada.
6. Copie o código: clique em "Copiar CSS" (ou direto sobre o código) e cole na sua folha de estilos ou no atributo style.

Como funciona

A propriedade box-shadow segue sempre a mesma ordem de valores: deslocamento horizontal, deslocamento vertical, raio de desfoque, espalhamento e cor. Uma sombra padrão fica assim:

box-shadow: 10px 10px 20px 0px rgba(26, 34, 51, 0.25);

Cada valor corresponde a um controle da ferramenta. Para gerar a cor, o gerador converte o tom escolhido no seletor (em hexadecimal) para o formato rgba() e aplica a opacidade como canal alfa. Assim, uma cor #1a2233 com 25% de opacidade vira rgba(26, 34, 51, 0.25). Quando você marca a opção de sombra interna, a palavra-chave inset é adicionada no início da declaração, invertendo o sentido do efeito de fora para dentro.

Todo o cálculo acontece no seu navegador, em tempo real. Nada é enviado a servidores, e a ferramenta funciona até offline depois que a página carrega.

Exemplos e dicas

• Sombra sutil de card: X e Y baixos (0 a 4px), desfoque médio (12 a 24px), espalhamento 0 e opacidade em torno de 10% a 15%. Passa leveza sem pesar o layout.
• Botão flutuante: aumente o desfoque e a opacidade para destacar o elemento e reforçar a sensação de que ele está "acima" da página.
• Efeito de profundidade (inset): use a sombra interna com desfoque médio para simular campos afundados ou botões pressionados.
• Sombras coloridas: em vez de cinza, use a mesma cor do elemento com opacidade baixa para um brilho sutil.
• Prefira opacidade baixa: sombras muito escuras deixam a interface pesada. Na dúvida, use tons de cinza-azulado com pouca opacidade.

Exemplos rápidos

Veja combinações prontas de valores e o box-shadow exato que elas geram. Ajuste os sliders com esses números para reproduzir cada efeito e copie o código correspondente.

• Sombra sutil de card, X 0, Y 4, desfoque 12, espalhamento 0, cor #000000, opacidade 10% → box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
• Botão flutuante (elevado), X 0, Y 8, desfoque 24, espalhamento 0, cor #000000, opacidade 20% → box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
• Sombra interna (inset), inset marcado, X 0, Y 2, desfoque 6, espalhamento 0, cor #000000, opacidade 30% → box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
• Sombra colorida azul, X 0, Y 6, desfoque 20, espalhamento -2, cor #2563eb, opacidade 40% → box-shadow: 0px 6px 20px -2px rgba(37, 99, 235, 0.4);
• Sombra dura (sem desfoque), X 6, Y 6, desfoque 0, espalhamento 0, cor #1a2233, opacidade 100% → box-shadow: 6px 6px 0px 0px rgba(26, 34, 51, 1);
• Sombra difusa com espalhamento negativo, X 0, Y 10, desfoque 15, espalhamento -5, cor #000000, opacidade 15% → box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.15);

Perguntas frequentes