Gerador de sombra de caixa CSS
Crie valores de sombra de caixa visualmente. Defina o deslocamento horizontal e vertical em pixels, raio de desfoque (borda suave), propagação (aumentar ou diminuir a sombra antes do desfoque), cor, opacidade e inserção opcional para sombras internas. A caixa de visualização é atualizada ao vivo; copie a declaração box-shadow completa em seu CSS. Entenda como cada parâmetro altera a elevação e a profundidade sem tentativa e erro no devtools.
X (px)
Y (px)
Desfoque (px)
Espalhamento (px)
Cor
Opacidade (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Como construir uma sombra de caixa
1. Definir o deslocamento X e Y - o X positivo move a sombra para a direita, o Y positivo a move para baixo.
2. Ajuste o desfoque (suavidade) e a propagação (tamanho antes do desfoque).
3. Escolha a cor da sombra e opacity.
4. Alternar inserção se a sombra deve aparecer dentro da caixa; copie CSS.
Receitas de sombra
Elevação de cartão flexível
offsetY 8px, desfoque 24px, spread 0, preto com 18% de opacidade - um cartão flutuante de estilo material: box-shadow: 0 8px 24px rgba (20,20,20,0.18).
Sombra projetada nítida
desfoque 0, propagação 0, deslocamentoY 4px - borda dura como um adesivo levantado ligeiramente da página.
Botão inserido pressionado
Ativar inserção com desfoque pequeno - simula um controle pressionado ou recuado dentro do elemento.
Quando usar esta ferramenta
• Quando você ajusta a profundidade da UI para cartões, modais e botões.
• Quando você aprende como o desfoque difere da propagação.
• Quando você documenta tokens de design com valores de sombra exatos.
Quando escolher outra coisa
• Quando você precisar de várias sombras empilhadas - copie a primeira camada aqui, então anexe mais em CSS.
• Quando você quer text-shadow - propriedade diferente com sintaxe semelhante.
• Quando você precisa de drop-shadow em formas PNG irregulares - filter: drop-shadow() pode funcionar melhor.
Ler os quatro números
box-shadow: 0 8px 24px 0 significa x=0, y=8px para baixo, blur=24px, spread=0. Omita a propagação e a propagação padrão do navegador é 0. O desfoque grande com deslocamento zero cria um brilho; grande deslocamento com pequeno desfoque cria luz direcional.
Camadas de sombras
Múltiplas sombras separadas por vírgula: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); A primeira sombra pinta abaixo das posteriores. Combine uma sombra escura compacta com uma sombra ampla e clara para uma profundidade realista.
Acessibilidade e desempenho
Sombras pesadas em grandes áreas animadas podem custar tempo de pintura da GPU. Prefira sombras sutis para UIs com muitos dados. Garanta que os elementos em foco permaneçam visíveis — não confie apenas na sombra para mostrar o estado; emparelhe com borda ou contorno para usuários de teclado.
Perguntas frequentes
Qual é a sintaxe box-shadow?
box-shadow: offset-x offset-y blur-radius spread-radius color; A palavra-chave de inserção opcional cria uma sombra interna.
Desfoque versus propagação?
Desfoque suaviza a borda da sombra. A propagação expande ou contrai a forma da sombra antes de desfocar - a propagação positiva aumenta, a negativa diminui.
Quais unidades devo usar?
Esta ferramenta gera pixels (px), a escolha mais comum para sombras da interface do usuário da tela.
O que a inserção faz?
A inserção desenha a sombra dentro da caixa de borda do elemento - útil para entradas afundadas ou poços.
A cor da sombra pode ser semitransparente?
Sim. A opacidade é aplicada à cor escolhida, produzindo saída rgba para bordas suaves em fundos variados.
Os valores são enviados para um servidor?
Não. A visualização e o CSS são locais.
Isso é grátis?
Sim, não é necessária nenhuma conta.