O que é um box shadow?

A box shadow é um efeito gráfico que adiciona uma sombra projetada a um elemento HTML, criando profundidade e interesse visual.

Como uso o Box Shadow Generator?

Simplesmente selecione o tipo de box shadow desejado, configure as propriedades e exporte seu código CSS gerado.

Sim, você pode ajustar a cor, blur, spread e posição da sua box shadow para conseguir o efeito desejado.

Sim, o Box Shadow Generator é completamente gratuito para usar, sem limitações ou marcas d'água.

Sim, você pode usar o Box Shadow Generator para projetos pessoais e comerciais, gratuitamente.

Gere CSS box-shadow com visualização ao vivo.

Horizontal Offset: 4

Vertical Offset: 4

Blur Radius: 8

Spread Radius: 0

Opacity: 0.3

Color

Inset

Preview

CSS

box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);

Escolha entre uma variedade de tipos de box shadow, incluindo inset, outer e opções personalizadas

Ajuste a cor, blur, spread e posição da sua box shadow para alcançar o efeito desejado

Copie e cole seu código CSS box-shadow gerado no seu projeto ou salve para usar depois

Generate linear and radial CSS gradients visually.

Generate CSS border-radius visually.

Format and beautify CSS code online.