Gerador de sombra de caixa - sombras CSS online

Shadow color

Inset

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Como usar Gerador de sombra de caixa

Defina os deslocamentos — X geralmente 0, Y positivo (a luz vem de cima).
Adicione desfoque generosamente e opacidade com moderação — leituras suaves e fracas são como reais.
Ajuste a dispersão apenas se a sombra precisar crescer/diminuir além do contorno do elemento.
Copie o CSS — e considere colocar uma segunda sombra mais estreita para realismo.

O que é Gerador de sombra de caixa?

Um gerador de sombra de caixa transforma controles deslizantes em box-shadow CSS: deslocamento horizontal e vertical, raio de desfoque, propagação e cor/opacidade, visualizado ao vivo — a sintaxe de quatro valores (box-shadow: 0 4px 12px rgba(0,0,0,0.15)) cujos números ninguém adivinha direito na primeira vez.

Sombras são como UIs planas expressam profundidade: um cartão "flutua" acima da página exatamente tanto quanto sua sombra indica. A diferença entre amador e polido é quase sempre a suavidade - as sombras reais são de grande desfoque, baixa opacidade e ligeiramente descendentes; caixas escuras com pequenos desfoques gritam padrão.

Sobre o Gerador de sombra de caixa

Arraste os controles deslizantes — deslocamento X/Y, desfoque, dispersão, cor e opacidade — observe a renderização da sombra ao vivo e copie o CSS quando parecer certo.

Receitas que sempre funcionam: a elevação sutil do cartão é 0 2px 8px rgba(0,0,0,0.1); um hover-lift emparelha uma sombra maior (0 8px 24px rgba(0,0,0,0.15)) com um pequeno translateY; o destaque modal/popover leva 0 16px 48px rgba(0,0,0,0.2). A intuição da física: maior elevação = maior deslocamento Y + mais desfoque + MENOS opacidade – a luz se espalha conforme a distância aumenta. As sombras coloridas (um brilho da marca sob um botão) vêm da troca do rgba preto pela cor da marca em alfa baixo.

A estratificação é o movimento profissional que a sintaxe suporta: duas ou três sombras separadas por vírgula (uma estreita e escura, uma grande e fraca) imitam a luz real muito melhor do que qualquer sombra única - as elevações do Material Design são construídas exatamente dessa maneira.

Perguntas Frequentes

Deslocamento X, deslocamento Y, raio de desfoque, propagação - depois cor. 0 4px 12px 0 rgba(0,0,0,.15): direto 4px, suavizado em 12px, sem alteração de tamanho, 15% preto.

Muito escuro e muito nítido – os padrões gêmeos. As sombras reais são surpreendentemente fracas (8–20% de opacidade) e desfocadas (desfoque ≥ 2–3× o deslocamento). Em caso de dúvida, duplique o desfoque e reduza pela metade a opacidade.

Dimensione o deslocamento Y e o desfoque enquanto reduz a opacidade: 0 2px 4px/.2 fica baixo; 0 12px 32px/.12 flutua alto. A distância difunde a luz – o CSS deve imitar isso.

Múltiplas sombras separadas por vírgula em um elemento: uma sombra escura e densa (sombra de contato) e uma sombra grande e esmaecida (ambiente). 0 1px 3px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1) supera qualquer sombra em termos de realismo.

Sombras estáticas são baratas. A animação da sombra da caixa força diretamente as repinturas - anime a opacidade em um pseudoelemento que carrega a sombra ou transforme o elemento enquanto a sombra permanece, para pairar a 60fps.