Gerador de Box Shadow CSS

Crie valores CSS box-shadow em múltiplas camadas com pré-visualização ao vivo, opção inset e controles precisos.

Camadas1
Crie valores CSS box-shadow em múltiplas camadas com pré-visualização ao vivo, opção inset e controles precisos.
Configurações da camada
Camada 1
px
px
px
px
Prévia
Copie o valor de box-shadow para o seu CSS.
box-shadow
Saída CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

O que é box-shadow?

Crie valores CSS box-shadow em múltiplas camadas com pré-visualização ao vivo, opção inset e controles precisos.

box-shadow é uma propriedade CSS que desenha uma ou mais sombras atrás (ou dentro) de um elemento.

Cada sombra usa deslocamentos horizontal e vertical, raio de desfoque, espalhamento opcional e uma cor com alfa; adicione inset para virar uma sombra interna.

Múltiplas camadas são separadas por vírgulas, permitindo empilhar sombras sutis para criar profundidade, brilho ou bordas nítidas.

  • Use deslocamentos pequenos com mais desfoque para uma elevação suave.
  • Use maior opacidade com pouco desfoque para bordas mais definidas.
  • Combine uma sombra externa com uma interna para adicionar profundidade.
  • Limite o número de camadas para melhor desempenho.