Skip to main content
O Box Shadow adiciona profundidade aos elementos criando um efeito de sombra em volta deles. Isso ajuda os elementos a se destacarem e deixa o design com um visual mais moderno e em camadas.

​
Como funciona

Uma sombra é formada por várias configurações que controlam a aparência e o comportamento dela.
Image

​
Configurações da sombra

​
Preset

  • Aplica rapidamente um estilo de sombra pronto (por exemplo, Small, Medium, Large)
  • Ideal para um design rápido e consistente

​
Type

  • Outer Shadow → aparece do lado de fora do elemento (a mais comum)
  • Inner Shadow → aparece dentro do elemento

​
Size (X e Y)

  • Controla a posição da sombra
  • X (horizontal) → move para a esquerda ou para a direita
  • Y (vertical) → move para cima ou para baixo
👉 Exemplo:
  • X: 0, Y: 4 → a sombra fica um pouco abaixo do elemento

​
Blur

  • Controla o quanto a sombra é suave
👉 Valor maior = sombra mais suave
👉 Valor menor = sombra mais nítida

​
Spread

  • Controla o quanto a sombra se espalha
👉 Positivo = sombra maior
👉 Negativo = sombra mais concentrada

​
Color

  • Define a cor da sombra (geralmente preto ou cinza com transparência)
👉 Comum: rgba(0, 0, 0, 0.1–0.3) para sombras suaves

​
Várias sombras

  • Você pode clicar em + Add para empilhar várias sombras
  • Útil para efeitos mais avançados ou em camadas