🌑

Gerador de Sombras CSS

Crie box-shadows CSS com preview ao vivo. Ajuste offset, blur, spread e cor.

Sombra 1

Inset

Offset X0px

Offset Y4px

Blur16px

Spread0px

Opacidade25%

CSS

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

Ferramentas Relacionadas

🎨

NovoDestaque

Gerador de Gradiente CSS

Crie gradientes CSS lineares e radiais com preview ao vivo e código pronto para copiar.

👨‍💻 DesenvolvedorAbrir

🎯

Novo

Extrator de Cores de Imagem

Extraia a paleta de cores dominantes de qualquer imagem enviada.

👨‍💻 DesenvolvedorAbrir

O Gerador de Sombras CSS do Utilitarioz cria box-shadow e drop-shadow com preview em tempo real, permitindo configurar deslocamento, desfoque, espalhamento, cor e opacidade. Copie o CSS gerado diretamente para o seu projeto.

Parâmetros do box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Múltiplas sombras podem ser combinadas com vírgula para efeitos mais ricos.

Perguntas Frequentes — Gerador de Sombras CSS

Qual a diferença entre box-shadow e drop-shadow?

box-shadow aplica sombra no box retangular do elemento, ignorando transparência. drop-shadow (filter) respeita a forma real do elemento, incluindo áreas transparentes — ideal para PNGs e SVGs.