Gerador de Box Shadow CSS

O que o box-shadow faz na prática?

box-shadow pinta uma sombra ao redor do elemento (ou dentro dele, com inset), seguindo a sua border box. Cada camada usa até seis valores: a palavra opcional inset, deslocamentos X e Y, raio de desfoque (blur), raio de spread e uma cor. Várias camadas separadas por vírgula são empilhadas pela ordem de declaração, com a primeira por cima. Esse empilhamento é o que dá profundidade visual às sombras de UI moderna: uma camada apertada e escura para o contato, uma camada larga e suave para a luz ambiente e, às vezes, um leve brilho colorido por cima. Esse gerador traz um palco com fundo xadrez transparente para você ver exatamente como a sombra cai — inclusive efeitos sutis que somem em fundo liso. Você pode arrastar qualquer valor pelo slider para ajustar rápido, digitar o número exato em pixels quando o designer manda specs, e reordenar camadas quando a ordem de pintura importa. A saída cobre tanto CSS puro quanto a sintaxe de valor arbitrário do Tailwind (shadow-[...]), e a pilha atual de sombras é codificada no hash da URL — assim, um link compartilhado reconstrói exatamente a mesma sombra do outro lado. Sem ida ao servidor: tudo renderiza no cliente conforme você muda as entradas.

Como usar

1. Comece em um preset

A linha de presets dá seis pontos de partida comuns. Sutil e Suave ficam bem em cards; Reta tem cara de UI plana; Neumórfica precisa de um fundo colorido para ler bem; Brilho brilha em UI escura; Profunda é para modais.

2. Ajuste os valores

Cada camada tem deslocamentos X / Y, blur, spread, cor e opacidade, além do toggle de inset. Arraste os sliders para feedback ao vivo ou digite números exatos no campo ao lado.

3. Empilhe e reordene

Clique em Adicionar camada para empilhar mais sombras. Cada camada nova começa com valores neutros. Use as setas para cima / baixo para reordenar — a primeira camada é pintada por último (em cima).

4. Copie a saída

Copie o CSS direto para sua folha de estilos, ou pegue a classe arbitrária do Tailwind para uso inline. Copiar link gera uma URL que reconstrói a pilha exata — útil para mandar para o designer.

Anatomia da sintaxe do box-shadow

A sintaxe completa é box-shadow: [inset] <deslocamento-x> <deslocamento-y> <blur> <spread> <cor>. Os deslocamentos X / Y movem a sombra horizontal e verticalmente. Y positivo empurra a sombra para baixo (a convenção de luz vinda de cima). O blur suaviza as bordas; 0 é uma sombra dura. O spread aumenta ou diminui a sombra antes do blur ser aplicado — valores positivos a deixam maior, negativos a apertam para ela só aparecer um pouco para fora das bordas. A cor aceita qualquer cor CSS, mas rgba() com alpha baixo costuma ficar melhor que um preto totalmente opaco — sombras reais são oclusões parciais, não tinta. A palavra opcional inset pinta a sombra dentro da caixa, útil para botões pressionados. Várias sombras separadas por vírgula empilham da frente para trás: a primeira ganha onde se sobrepõem.

Escolhendo valores que funcionam

Cards / painéis: Y de 4–12px, blur 12–28px, spread -2 a -8, alpha 0,08–0,20. Duas camadas (uma apertada, uma larga) costumam ganhar de uma camada forte só. Botões: Y de 1–2px, blur 2–4px, alpha bem baixo — pense numa sombra de contato. Modais: Y de 20–40px, blur 40–80px, spread negativo, alpha 0,25–0,45. Brilho: X e Y em 0, blur 20–60px, cor é o accent da marca em 30–60% de alpha. Inset: deslocamentos pequenos (1–2px) e blur mínimo para estados pressionados. Evite: preto puro com alpha total — esmaga tudo embaixo. Use o tom do fundo da página em uma versão mais escura para sombras que parecem de fato grudadas no elemento.

Perguntas frequentes