Gerador CSS box-shadow

Gerador de box-shadow CSS com controles de deslocamento, desfoque, expansão, cor e inset e prévia ao vivo da sombra. Copie o CSS pronto para uso, grátis no navegador.

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

Plano de fundo

Cor da caixa

Sombra projetada

Inset

Deslocamento X: 4px

Deslocamento Y: 4px

Desfoque: 10px

Expansão: 0px

Cor

Incorporar

<iframe src="https://devtools.patrache.studio/pt-BR/generators/css-box-shadow/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Gerador CSS box-shadow — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/pt-BR/generators/css-box-shadow/">Gerador CSS box-shadow</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Última atualização: 2026 · Ferramenta online gratuita

O que é Gerador CSS box-shadow?

Gerador de box-shadow CSS com controles de deslocamento, desfoque, expansão, cor e inset e prévia ao vivo da sombra. Copie o CSS pronto para uso, grátis no navegador.

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 CSSGerador visual de gradientes CSS lineares, radiais e cônicos: adicione paradas de cor, ajuste o ângulo e copie o CSS. Perfeito para fundos e botões, grátis no navegador.

Gerador CSS border-radiusGerador de border-radius CSS com oito alças de canto independentes, controles deslizantes e prévia ao vivo da forma arredondada. Copie o CSS pronto para uso, grátis no navegador.

Gerador CSS FlexboxPlayground de CSS Flexbox com editor visual para justify-content, align-items, flex-direction e wrap, com prévia de layout ao vivo. Gere CSS Flexbox pronto para copiar, grátis no navegador.

Conversor de coresConversor de cores entre códigos HEX, RGB, HSL e OKLCH, com a razão de contraste WCAG de duas cores. Verifique a acessibilidade enquanto escolhe a paleta, grátis no navegador.

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.