Gerador de Box Shadow CSS

Crie sombras suaves e modernas para seus projetos web. Ajuste os parâmetros e copie o código CSS pronto.

Configurações

Deslocamento Horizontal10px

Deslocamento Vertical10px

Desfoque (Blur)20px

Propagação (Spread)0px

Opacidade da Sombra0.25

Cor da Sombra

#000000

Sombra Interna

Cor do Box

Cor do Fundo

Preview

CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);

Dica Pro

Sombras mais suaves geralmente usam um valor de Blur alto e uma Opacidade baixa. Tente usar múltiplas camadas de sombra para um efeito ainda mais realista (em breve nesta ferramenta).

O que é Box Shadow CSS?

A propriedade box-shadow do CSS permite adicionar efeitos de sombra a elementos HTML. É uma das ferramentas mais poderosas para criar profundidade e hierarquia visual em interfaces web modernas. Com ela, você pode simular elevação, criar efeitos de brilho ou simplesmente destacar um elemento do fundo.

Nosso Gerador de Box Shadow facilita a criação desses efeitos visualmente, gerando o código CSS automaticamente para você copiar e colar no seu projeto.

Como usar o Gerador de Sombra CSS?

Ajuste a Posição: Use os controles "Horizontal" e "Vertical" para mover a sombra.
Defina o Desfoque: O controle "Blur" determina o quão nítida ou difusa a sombra será.
Controle o Tamanho: O "Spread" aumenta ou diminui o tamanho da sombra em relação ao elemento.
Escolha as Cores: Selecione a cor da sombra e ajuste sua opacidade para um efeito natural.
Copie o Código: Clique no botão "Copiar" e cole no seu arquivo CSS.

Perguntas Frequentes (FAQ)

O que é "Inset"?

A opção "Inset" muda a sombra para dentro do elemento, criando um efeito de profundidade ou baixo relevo, como se o elemento estivesse "afundado" na página.

Por que usar rgba para cores de sombra?

O formato RGBA permite definir a transparência (canal Alpha) da cor. Isso é crucial para sombras, pois sombras naturais não são sólidas; elas permitem ver um pouco do fundo através delas.

Funciona em todos os navegadores?

Sim! A propriedade box-shadow é suportada por todos os navegadores modernos. Nosso gerador também fornece os prefixos -webkit- e -moz- para garantir compatibilidade com versões muito antigas.

Como fazer sombras realistas?

Para sombras realistas (estilo Material Design), use um desfoque (blur) maior que o deslocamento vertical, e mantenha a opacidade baixa (entre 0.1 e 0.3). Evite sombras pretas puras; use tons escuros da cor do elemento ou do fundo.