Ir para o conteúdo
UtiliLab

Gerador de Box Shadow CSS com Várias Camadas

Ajuste cada camada da sombra com os controles e veja o resultado na hora. Sombras com duas ou mais camadas ficam mais naturais.

Processado no seu navegador — nada é enviado ou armazenado.

Prévia
px
Modelos:

Camadas (2)

A primeira camada fica por cima das outras.

Camada 1
px
px
px
px
%

CSS

box-shadow:
  0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -2px rgba(0, 0, 0, 0.1);

Como usar

  • Comece por um modelo (suave, média, elevada, interna, neumorfismo) ou ajuste do zero.
  • Ajuste deslocamento horizontal e vertical, desfoque, propagação, cor e opacidade.
  • Adicione camadas para uma sombra mais realista; ligue, desligue ou reordene cada uma.
  • Mude a cor do cartão e do fundo da prévia para testar no seu layout, e copie o CSS.

Os valores do box-shadow

  • Deslocamento X e Y: para onde a sombra vai. Y positivo é para baixo, como uma luz vinda de cima.
  • Desfoque: quanto a borda se espalha. Zero dá uma sombra recortada.
  • Propagação: aumenta (positivo) ou encolhe (negativo) a sombra antes do desfoque. Valores negativos deixam a sombra mais contida.
  • Interna (inset): a sombra fica dentro da caixa, como um campo afundado.

Conteúdo e funcionamento revisados pela Equipe UtiliLab em . Consulte nossa metodologia de revisão.

Perguntas frequentes

O código gerado funciona em todos os navegadores?

Sim. O CSS sai na sintaxe padrão, sem prefixos, que Chrome, Edge, Firefox e Safari entendem nas versões atuais — inclusive no celular.

Por que usar várias camadas?

Na vida real, uma sombra tem uma parte nítida e próxima e outra difusa e distante. Duas camadas — uma pequena e uma grande — reproduzem isso e ficam bem mais naturais que uma só.

A sombra afeta o desempenho?

Pouco. Desfoques muito grandes em muitos elementos que se animam podem pesar em celulares; para cartões e botões, não há problema.

Ferramentas relacionadas

Gerador de Border Radius

Arredonde cada canto separadamente, em px ou %, e copie o border-radius mais curto.

Gerador de Gradiente CSS

Monte gradientes lineares, radiais e cônicos num editor visual e copie o CSS.

Verificador de Contraste

Calcule a razão de contraste entre texto e fundo e veja se atende aos níveis AA e AAA da WCAG.

Seletor de Cores

Escolha uma cor no quadro de saturação e brilho e copie em HEX, RGB, HSL ou HSV.