Algo errado nesta ferramenta?
Sobre «CSS Box Shadow Generator Online»
Esta ferramenta constrói valores CSS box-shadow visualmente com sliders para offset, blur, spread, cor, e opacidade. Você vê a sombra atualizar em tempo real e copia o CSS correspondente quando estiver satisfeito.
Sombras de caixa adicionam profundidade, separam elementos do fundo, e sinalizam interatividade (estados de hover, estados pressionados, elementos focados). Sombras de múltiplas camadas podem simular configurações de iluminação complexas como Material Design elevation ou efeitos neumórficos.
Use para cartões, modais, popovers, botões, e qualquer elemento de UI que precise de elevação visual. O gerador pode produzir box-shadow clássico, múltiplas camadas de sombra, e combinações modernas de offset/blur.
Como usar esta ferramenta
Como montar uma declaração CSS box-shadow
Deslocamentos
"X offset (px)" e "Y offset (px)" movem a sombra na horizontal (positivo = direita) e vertical (positivo = baixo). O padrão CSS é sem offset; sombras de card típicas usam Y ~ `4` e X perto de 0.
Blur e cor
"Blur (px)" controla suavidade — 0 = bordas duras, 10+ = nebuloso. "Color" aceita qualquer cor CSS, inclusive rgba/hex com alpha. Para sombras de UI sutis use `rgba(0,0,0,0.15)` com blur moderado.
Executar
Resultado: um único campo `css` — `<x>px <y>px <blur>px <color>`. Cole como valor de `box-shadow:`. Spread e inset não são emitidos; a sintaxe permite, mas a ferramenta fica na forma de 4 argumentos.
Sombras empilhadas
Designs reais costumam empilhar 2-3 sombras separadas por vírgulas (uma longa e suave + uma curta e fechada) para profundidade. Gere cada uma com a ferramenta e concatene à mão em um único `box-shadow:`.