Design

Gerador de CSS Box Shadow Gratuito

Projete box shadows CSS visualmente com controles deslizantes para offset, desfoque, spread, cor e opacidade. Sobreponha múltiplas sombras e escolha predefinições. Copie o CSS gerado. Sem cadastro.

100% gratuito — nenhuma conta necessária

-5050
-5050
0100
050
01
Pré-visualização
CSS Gerado
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Recursos de Gerador de CSS Box Shadow Gratuito

Sombras perfeitas sem adivinhar valores CSS

Copiar CSS

Copie com um clique a propriedade CSS box-shadow gerada.

Múltiplas Sombras

Sobreponha várias camadas de sombra para efeitos complexos e realistas.

5 Predefinições

Pontos de partida sutil, médio, pesado, flutuante e brilho interno.

Controles Intuitivos

Controles deslizantes para offset horizontal/vertical, desfoque, spread, cor e opacidade.

FAQ

O que significam os valores da sombra?

Offset horizontal move a sombra esquerda/direita, vertical move cima/baixo, desfoque controla suavidade, spread controla tamanho e cor define a cor da sombra.

O que é uma sombra inset?

Uma sombra inset aparece dentro do elemento em vez de fora, criando um efeito pressionado ou recuado.

Quantas camadas de sombra posso usar?

CSS suporta camadas de sombra ilimitadas. Esta ferramenta permite adicionar múltiplas. Designs comuns usam 1-3 camadas para profundidade sutil e realista.

Gostando das nossas ferramentas gratuitas?

Crie Conteúdo Visual Impressionante

Use sombras bonitas nos seus gráficos de redes sociais.