Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Shadow Layers
Shadow 1
0px
4px
12px
-2px
20%
CSS
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.20);
Como Usar Gerador de CSS Box Shadow
- 1Ajuste os controles deslizantes de deslocamento horizontal e vertical.
- 2Defina o raio de desfoque e o espalhamento para controlar a forma da sombra.
- 3Escolha uma cor de sombra e opacidade.
- 4Alterne a opção inset para sombras internas.
- 5Copie o código CSS box-shadow gerado.
ZenovayAnalytics
Saiba o que seus visitantes realmente fazem.
- Acompanhamento de visitantes em tempo real
- Privacidade em primeiro lugar, modo sem cookies disponível
- Configurado em dois minutos
Ferramentas Relacionadas
Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.Gerador de CSS Grid
Construa layouts CSS Grid com um editor visual. Defina colunas, linhas, espaçamentos e estenda células nas áreas.Perguntas Frequentes
Como funcionam os valores do box shadow?▾
O box shadow recebe offset-x, offset-y, raio de desfoque, raio de expansão e cor. O offset controla a posição, o desfoque controla a suavidade e a expansão controla o tamanho. Expansão negativa deixa a sombra menor que o elemento.
Posso adicionar múltiplas sombras?▾
Sim. Clique em "Adicionar Sombra" para incluir camadas adicionais. Múltiplas sombras são comuns no design moderno para criar efeitos de profundidade e elevação.
O que faz a opção inset?▾
A palavra-chave inset muda a sombra de externa (sombra projetada) para interna. Isso cria uma aparência pressionada ou recuada.
Posso controlar a opacidade da sombra?▾
Sim. Cada camada de sombra tem um controle deslizante de opacidade (0–100%). A ferramenta gera valores de cor rgba() com a opacidade especificada.
Posso usar essa ferramenta no meu celular?▾
Sim, o gerador de box shadow funciona em qualquer navegador mobile moderno. Ajuste os parâmetros da sombra com os controles deslizantes e copie o CSS em qualquer dispositivo.
O CSS gerado funciona com Tailwind CSS?▾
Sim. Você pode usar o valor de box-shadow gerado com a sintaxe de valor arbitrário do Tailwind, como shadow-[value], ou defini-lo como uma sombra personalizada no seu tailwind.config.js.
Quantas camadas de sombra posso adicionar?▾
Você pode adicionar múltiplas camadas de sombra para criar efeitos de profundidade complexos. Cada camada tem controles independentes de offset, desfoque, expansão, cor, opacidade e inset, permitindo designs de elevação realistas.