Como criar uma sombra CSS (box-shadow) com pré-visualização ao vivo
Publicado em 14 de setembro de 2026 · 2 min de leitura
Fazer o deslocamento, desfoque, propagação e cor de uma box-shadow ficarem corretos geralmente significa editar CSS e atualizar repetidamente uma aba do navegador. Esta ferramenta fornece controles deslizantes e uma pré-visualização ao vivo para que você veja o efeito exato antes de copiar o CSS.
Experimentar Gerador de Sombra CSSPassos
- 1
Abra o Gerador de CSS Box Shadow
Acesse o gerador de box-shadow.
- 2
Escolha uma predefinição ou comece personalizado
Escolha uma predefinição estilo Tailwind, ou ajuste seu próprio deslocamento, desfoque, propagação e cor.
- 3
Adicione uma segunda camada de sombra (opcional)
Sobreponha uma segunda sombra para mais profundidade, como sistemas de design costumam usar.
- 4
Copie o CSS
Cole a regra box-shadow gerada diretamente na sua folha de estilos.
Perguntas frequentes
Sim — ative o modo inset para obter uma sombra que aparece dentro da borda do elemento em vez de fora dela.
Sim — ative uma segunda camada de sombra para um efeito de profundidade mais sutil e em camadas, uma técnica comum em sistemas de design modernos.
Sim — a pré-visualização renderiza a propriedade box-shadow CSS real, então o que você vê é exatamente o que obterá ao colar o código.
Como a pré-visualização atualiza ao vivo enquanto você ajusta cada controle deslizante, você pode ajustar finamente uma sombra para ficar exatamente certa antes mesmo de tocar na sua folha de estilos.