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.
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.
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.
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.