Gerador de Sombra CSS

O gerador de sombra CSS ajuda você a montar o efeito box-shadow ideal sem decorar a sintaxe nem ficar testando valores no código. Você arrasta os controles, vê o resultado ao vivo no quadrado de preview e copia o CSS pronto para colar no seu projeto. É a forma mais rápida de criar sombras em botões, cards, menus, modais e qualquer outro elemento da sua página, tudo 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 próprio navegador, em tempo real. Nada é enviado para servidores, então você pode usar a ferramenta à vontade, inclusive 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, experimente a mesma cor do elemento com opacidade baixa para um brilho moderno e elegante.
• Prefira opacidade baixa: sombras muito escuras deixam a interface pesada. Na dúvida, use tons de cinza-azulado com pouca opacidade.

Perguntas frequentes