Gerador de Sombras CSS
Configurações de sombra
Predefinições
Pré-visualização de sombra
Código CSS
.element {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 1);
}
? Perguntas Frequentes
Que propriedades de sombra CSS posso gerar?
A ferramenta gera sombras de caixa (para elementos) e sombras de texto (para texto). Você pode controlar o deslocamento horizontal/vertical, o raio de desfoque, o raio de propagação (somente para caixas), a cor e as sombras internas. É possível sobrepor várias sombras.
Como faço para criar efeitos de sombra realistas?
Sombras realistas utilizam múltiplas camadas de sombras com diferentes valores de desfoque e opacidade para imitar a luz real. Comece com uma sombra nítida e escura próxima ao objeto e, em seguida, adicione sombras mais suaves e claras para criar profundidade.
Qual a diferença entre desfoque e dispersão?
O raio de desfoque controla a suavidade/difusão das bordas da sombra (quanto maior, mais suave). O raio de propagação expande ou contrai o tamanho da sombra antes de desfocá-la. A propagação só está disponível para sombras de caixa, não para sombras de texto.
Posso criar sombras internas?
Sim! A palavra-chave 'inset' cria sombras internas que aparecem dentro do elemento, dando uma aparência rebaixada ou embutida. Isso é ótimo para criar botões pressionados ou superfícies com recuos.
Mostra a pré-visualização ao vivo?
Sim, o gerador fornece uma pré-visualização visual em tempo real enquanto você ajusta os parâmetros da sombra. Você pode ver exatamente como a sombra ficará e copiar o código CSS gerado diretamente para sua folha de estilo.
Meus dados estão seguros e protegidos?
Sim, com certeza! Esta ferramenta funciona inteiramente no seu navegador. Todo o processamento de dados ocorre localmente no seu dispositivo — nada é enviado para os nossos servidores. Seus arquivos e dados nunca saem do seu computador, garantindo total privacidade e segurança.