Gerador de Sombra de Caixa
Ferramenta visual para criar e copiar código CSS box-shadow.
Ambiente
Saída CSS
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
Camada 1
Ferramentas recomendadas
Utilitários selecionados que você pode achar úteis
Desenhar sombras CSS (box-shadow) de forma visual
Visão Geral
Um gerador de box-shadow permite criar a propriedade CSS box-shadow arrastando controles em vez de adivinhar números. Sombras dão profundidade e hierarquia a botões, cards e modais, mas a sintaxe — deslocamentos, desfoque, expansão, cor e inset — é chata de escrever à mão. Esta ferramenta mostra uma prévia ao vivo enquanto você ajusta cada valor e dá o CSS exato para copiar, tudo no navegador.
Como usar (passo a passo)
- 1
Ajuste os controles
Defina o deslocamento horizontal e vertical, o desfoque, a expansão e a cor enquanto olha a prévia ao vivo.
- 2
Empilhe sombras se preciso
Adicione várias camadas de sombra para profundidade, ou ligue inset para uma sombra interna.
- 3
Copie o CSS
Pegue o valor box-shadow gerado e cole na sua folha de estilos ou componente.
Como Funciona
A propriedade box-shadow recebe deslocamentos horizontal e vertical, um raio de desfoque, uma expansão opcional e uma cor (geralmente com transparência). Você move controles para cada um e a prévia atualiza na hora, então vê exatamente como a sombra cai. A ferramenta escreve a declaração box-shadow correspondente, incluindo várias sombras empilhadas se você as adicionar, pronta para colar na sua folha de estilos.
Quando usar
Adicionar uma sombra sutil para elevar um card ou botão. Reproduzir uma sombra de um mockup sem adivinhar os valores. Construir uma sombra realista e em camadas com várias sombras empilhadas. Criar uma sombra inset para elementos de UI pressionados ou afundados. Afinar a suavidade e a cor da sombra para temas escuros ou claros. Aprender como cada valor de box-shadow afeta o resultado.
Perguntas Frequentes
Em ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque e expansão. Os deslocamentos movem a sombra, o desfoque suaviza a borda e a expansão a aumenta ou diminui. Segue uma cor, muitas vezes rgba() com baixa opacidade para sutileza.
Notas Importantes
Box-shadows pesadas ou numerosas podem prejudicar o desempenho de renderização, sobretudo ao animar. Mantenha as sombras sutis e limite as camadas empilhadas em elementos que se movem ou atualizam com frequência.