Gerador de box-shadow CSS

O que é Gerador de box-shadow CSS?

O gerador de box-shadow CSS é um editor visual gratuito da propriedade box-shadow, feito para desenvolvedores front-end e designers. Adicione uma ou mais camadas de sombra e ajuste em cada uma o offset-x, o offset-y, o raio de desfoque, o raio de expansão, a cor e a opção inset com campos numéricos simples e um seletor de cores. Uma caixa de prévia sobre um fundo quadriculado mostra o resultado combinado em tempo real, e a declaração box-shadow completa — separando cada camada por vírgulas — é gerada para você copiar. Use-o para criar sombras de elevação suaves, neumorfismo nítido, efeitos de brilho ou profundidade em camadas no estilo Material sem memorizar a ordem dos valores.

Como usar Gerador de box-shadow CSS

1. Defina o offset-x e o offset-y da primeira camada (em px) para mover a sombra na horizontal e na vertical; valores negativos a movem para a esquerda ou para cima.
2. Ajuste o raio de desfoque (o quão suave é a sombra) e o raio de expansão (o quanto ela cresce ou diminui).
3. Escolha uma cor com a amostra ou digite um valor hexadecimal — um hex de 8 dígitos como #00000040 define a transparência da sombra.
4. Marque a caixa inset para desenhar a sombra dentro do elemento em vez de fora.
5. Clique em Adicionar camada para empilhar outra sombra por cima e reorganize editando os valores; remova qualquer camada com seu botão de lixeira.
6. Acompanhe a atualização da prévia e copie o CSS box-shadow gerado para a sua folha de estilos.

Exemplos

x 0, y 4, desfoque 12, expansão 0, cor #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Camada 1: 0 1 2 0 #0000001a · Camada 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset marcado, x 0, y 2, desfoque 6, expansão 0, cor #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Perguntas frequentes

Qual é a ordem dos valores de box-shadow?

Cada camada é escrita como offset-x, offset-y, raio de desfoque, raio de expansão, cor, com uma palavra-chave inset opcional na frente. Esta ferramenta sempre gera os quatro comprimentos em px (offset-x, offset-y, desfoque, expansão), de modo que a ordem é inequívoca e fácil de ajustar à mão depois.

Posso adicionar uma sombra semitransparente ou colorida?

Sim. Digite qualquer cor CSS no campo de cor — um hex completo de 8 dígitos como #00000040 (os dois últimos dígitos são o alfa) gera uma sombra semitransparente, e você pode usar cores nomeadas ou qualquer hex. A amostra do seletor lida com cores sólidas #rrggbb; para o alfa, edite o campo de texto.

Como empilho várias sombras?

Clique em Adicionar camada para cada sombra extra. O CSS gerado separa cada camada por vírgulas em ordem, de cima para baixo — a primeira camada é pintada por último (no topo). Use isso para profundidade em camadas no estilo Material ou para combinar um brilho externo com um realce inset.

O que a caixa inset faz?

Inset desenha a sombra dentro da borda do elemento, criando um visual pressionado ou de brilho interno em vez de uma sombra projetada externa. Marque-a por camada; você pode misturar sombras inset e externas no mesmo valor de box-shadow.

Meus dados são enviados para algum lugar?

Não. O gerador roda inteiramente no seu navegador com JavaScript — suas cores e valores nunca são enviados a um servidor, então ele funciona de forma privada e até offline depois que a página é carregada.