Gerador CSS box-shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Última atualização: 2026 · Ferramenta online gratuita
O que é Gerador CSS box-shadow?
Gerador CSS box-shadow gratuito online com controles de deslocamento, desfoque, propagação, cor e inset, que oferece prévia ao vivo da sombra e gera código CSS box-shadow pronto para copiar.
Como usar
- 1 Selecionar preset — Comece rapidamente com um botão de preset.
- 2 Ajustar controles deslizantes — Ajuste a sombra com os controles de deslocamento X/Y, desfoque e propagação.
- 3 Pré-visualização — Verifique o resultado em tempo real na pré-visualização acima.
- 4 Copiar CSS — Use o botão de copiar para obter o CSS box-shadow.
Ferramentas relacionadas
Gerador de gradiente CSS Gerador visual gratuito de gradientes CSS: crie gradientes lineares, radiais e cônicos, ajuste os pontos de cor e o ângulo e copie o código CSS pronto para seus fundos.
Gerador CSS border-radius Gerador CSS border-radius gratuito online com oito alças de canto independentes e controles deslizantes, que oferece prévia ao vivo da forma arredondada e gera código CSS border-radius pronto para copiar.
Gerador CSS Flexbox Playground CSS Flexbox gratuito online com editor visual para justify-content, align-items, flex-direction e wrap, que mostra prévia de layout ao vivo e gera CSS Flexbox pronto para copiar do seu contêiner.
Perguntas frequentes
Sim, use o botão 'Adicionar sombra' para sobrepor múltiplas sombras.
Sim, ative a caixa de seleção Inset em cada sombra para criar uma sombra interna.
Cinco presets são fornecidos: Subtle, Medium, Large, Inset e Double.
Sim, você pode inserir diretamente rgba(0,0,0,0.15) no campo de cor.
Não. Todos os cálculos são feitos no navegador.