ZenovayTools

Gerador de box-shadow CSS

Projete efeitos CSS box-shadow visualmente com múltiplas camadas, suporte inset, controle de opacidade e saída CSS pronta para copiar.

Live preview

Preview background

Box color

Presets

Shadow Layers

px
px
px
px
%

CSS Output

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);

Como Usar Gerador de box-shadow CSS

  1. 1Ajuste o deslocamento da sombra, desfoque, espalhamento e cor com controles deslizantes.
  2. 2Adicione múltiplas camadas de sombra para efeitos complexos.
  3. 3Experimente presets como neumórfico, cartão flutuante ou brilho.
  4. 4Copie o código CSS gerado para seu projeto.
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
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
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.

Perguntas Frequentes

Qual é a sintaxe CSS box-shadow?▾
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Exemplo: box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2).
Qual é a diferença entre box-shadow e drop-shadow?▾
box-shadow cria uma sombra retangular atrás do modelo da caixa. filter: drop-shadow() segue a forma visível do elemento, incluindo áreas transparentes.
Como faço para criar uma sombra realista?▾
Use opacidade baixa (10-30%), leve deslocamento para baixo, desfoque moderado, espalhamento zero ou negativo. Adicione uma segunda camada de sombra ambiente para realismo.
Para que servem as sombras inset?▾
Sombras inset aparecem dentro do elemento, criando efeitos pressionados/recuados. Usadas para botões pressionados, campos de entrada, design neumórfico e barras de progresso.
Como funcionam múltiplas sombras de caixa?▾
Múltiplos valores são separados por vírgula e renderizados em ordem (primeiro no topo). Isso permite profundidade em camadas, combos de brilho + sombra de queda e efeitos neumórficos.