Gerador de Box Shadow CSS

Crie sombras box-shadow com pré-visualização: desfoque, expansão, interna.

Deslocamento X: 0px

Deslocamento Y: 4px

Desfoque: 12px

Expansão: 0px

Opacidade: 10%

Interno

Pré-visualização

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);

Procurando degradês ou glassmorphism? Experimente nossas ferramentas dedicadas: Gerador de Gradiente CSS · Criador de Glassmorphism

Como funciona

Escolha um efeito: box-shadow, gradiente ou glassmorphism.
Ajuste os controles e veja a pré-visualização ao vivo atualizar.
Refine cores, blur, spread e opacidade.
Copie o CSS gerado.

Para que serve

Acertar um box-shadow sem chutar valores.
Montar um gradiente visualmente e copiar o CSS.
Criar um efeito de card em glassmorphism.

Bom saber

Ele gera CSS padrão; alguns efeitos (como o blur com backdrop-filter) dependem do suporte do navegador para o visual final.
A pré-visualização mostra um elemento — teste no seu layout real quanto a empilhamento e interações com o fundo.

Perguntas frequentes

Quais efeitos posso gerar?

Box-shadow, gradientes linear/radial e glassmorphism — cada um com uma pré-visualização ao vivo para você ajustar a olho, e não por tentativa e erro.

O glassmorphism vai funcionar em todo lugar?

Ele depende do backdrop-filter, suportado pela maioria dos navegadores modernos; os mais antigos recorrem a um fundo simples. Teste nos seus navegadores-alvo.

Algo é enviado?

Não. O CSS é gerado ao vivo no seu navegador.

Ferramentas relacionadas

Visualizador de DXF

Paleta de Cores

Conversor de Cores

Verificador de Contraste

Criador de Cartões Glass