Gerador de Sombras CSS
Crie sombras box-shadow visualmente com pré-visualização ao vivo. Ajuste deslocamento, desfoque, propagação e cor e copie o CSS pronto para usar instantaneamente.
CSS Box Shadow Generator
Design beautiful shadows and copy the CSS instantly.
Como usar o Gerador de Sombras CSS
- Ajuste os controles de deslocamento X e Y para posicionar a sombra em relação ao elemento.
- Defina o raio de desfoque para suavidade e o raio de propagação para o tamanho da sombra.
- Escolha ou digite uma cor de sombra usando qualquer valor CSS válido (hex, rgba, hsla).
- Ative sombra interna para efeitos de sombra interior.
- Copie o CSS box-shadow gerado e cole diretamente na sua folha de estilos.
Sobre Sombras CSS
Sombras adicionam profundidade e hierarquia visual aos elementos da interface. São uma das propriedades CSS mais usadas no design web moderno, aplicadas a cartões, botões, modais e barras de navegação.
Este gerador oferece controle visual completo — cada ajuste de controle atualiza a pré-visualização ao vivo instantaneamente para que você possa ajustar a aparência exata antes de copiar o código. O CSS gerado usa a sintaxe box-shadow padrão e funciona em todos os navegadores modernos.
Perguntas frequentes
O que o raio de propagação faz? ▼
O raio de propagação controla até onde a sombra se estende além ou dentro do elemento. Valores positivos expandem para fora, negativos encolhem para dentro.
O que é uma sombra interna? ▼
Uma sombra interna é renderizada dentro dos limites do elemento em vez de fora. É comumente usada para efeitos de botão pressionado ou profundidade interna.
Posso usar valores rgba para a cor da sombra? ▼
Sim. Você pode digitar qualquer valor de cor CSS válido, incluindo rgba, hsla, códigos hexadecimais ou nomes de cores.
O CSS está pronto para produção? ▼
Sim. O CSS gerado usa a sintaxe box-shadow padrão compatível com todos os navegadores modernos.