Gerador de Sombra CSS
Crie sombras box-shadow personalizadas com preview em tempo real.
O Que é Sombra CSS (box-shadow)?
A propriedade box-shadow do CSS adiciona sombras aos elementos de uma página, criando profundidade e destacando cartões, botões, modais e caixas. Ela é composta por vários valores: o deslocamento horizontal (X), o deslocamento vertical (Y), o desfoque (blur), o espalhamento (spread) e a cor da sombra, normalmente definida em rgba() para permitir transparência.
Combinando esses valores, você cria desde sombras sutis que dão um leve relevo até sombras dramáticas que fazem o elemento parecer flutuar sobre a página. O parâmetro inset transforma a sombra em interna, projetando-a para dentro do elemento em vez de para fora, um recurso útil para simular campos rebaixados e efeitos de profundidade. Este gerador facilita todo o processo: você ajusta cada valor com controles deslizantes, escolhe a cor e a opacidade, e visualiza o resultado em tempo real num preview interativo. Ao final, basta copiar a linha de CSS pronta e colar no seu projeto, sem precisar decorar a ordem dos parâmetros nem calcular manualmente a conversão de cor hexadecimal para rgba.
Como Funciona o Gerador de Sombra?
- Deslocamento X e Y: defina para onde a sombra é projetada, na horizontal e vertical
- Desfoque (blur): quanto maior o valor, mais suave e espalhada fica a sombra
- Espalhamento (spread): aumenta ou reduz o tamanho da sombra
- Cor e opacidade: escolha a cor e a transparência convertida para rgba automaticamente
- Inset: marque para transformar em sombra interna
- Copie o CSS: visualize no preview e copie a linha pronta
Para Que Serve Este Gerador?
- Cartões e caixas: destacar blocos de conteúdo com relevo
- Botões: criar efeitos de elevação e profundidade
- Modais e popups: separar visualmente o elemento do fundo
- UI/UX: dar hierarquia visual às interfaces
- Neumorfismo: criar efeitos suaves com sombras internas e externas
- Prototipagem: testar estilos de sombra rapidamente
Ferramentas Relacionadas
Aperfeiçoe seu design combinando esta ferramenta com o Gerador de Gradiente CSS para criar fundos modernos. Para escolher a cor ideal da sombra, use o Gerador de Paletas de Cores. E para preencher seus protótipos com texto de exemplo, experimente o Gerador de Lorem Ipsum.
Perguntas Frequentes
O que significa cada valor do box-shadow?
Na ordem: deslocamento horizontal (X), deslocamento vertical (Y), desfoque (blur), espalhamento (spread) e a cor. O prefixo inset, quando presente, torna a sombra interna.
Por que a cor é convertida para rgba?
O formato rgba permite controlar a transparência da sombra pela opacidade. Sombras totalmente opacas parecem artificiais, então usar rgba com opacidade menor cria um resultado mais natural.
O que faz a opção inset?
O inset projeta a sombra para dentro do elemento em vez de para fora, simulando um efeito rebaixado ou de profundidade interna, muito usado em campos de formulário e no estilo neumorfismo.
Posso aplicar várias sombras no mesmo elemento?
Sim. A propriedade box-shadow aceita múltiplas sombras separadas por vírgula. Gere cada sombra aqui e combine-as manualmente no código para efeitos mais elaborados.
O código gerado é gratuito?
Sim, o CSS gerado é livre para uso pessoal e comercial. Copie e cole em qualquer projeto sem restrições ou necessidade de atribuição.
Palavras-chave Relacionadas
gerador de sombra css, box-shadow generator, gerar box-shadow, sombra css online, box shadow gerador, criar sombra css, sombra em css, código box-shadow, gerador de box shadow, sombra interna css, inset box-shadow, efeito de sombra css, box-shadow online, sombra para div, sombra de caixa css