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.

Ferramenta de Design

Gerador de Box Shadow CSS

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.

100% gratuito — nenhuma conta necessária

Predefinições

Camadas de Sombra

Offset Horizontal: 0

-5050

Offset Vertical: 4

-5050

Desfoque: 12

0100

Expansão: 0

050

Cor

Opacidade: 15%

Interno

Pré-visualização

CSS Gerado

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

Designer Visual de Sombras

Sombras perfeitas sem adivinhar valores CSS

Controles Intuitivos

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

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.

Copiar CSS

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

FAQ

Ferramentas de Design

Crie Conteúdo Visual Impressionante

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