> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Use o Box Shadow para dar profundidade e estilo

> Adicione sombras para criar profundidade, destacar elementos e melhorar a hierarquia visual do design da sua landing page.

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.

***

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-16.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=4fa841d790f27152d6791691abfbb96e" alt="Image" width="586" height="366" data-path="images/image-16.png" />
</Frame>

## 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<br />👉 Valor menor = sombra mais nítida

***

### Spread

* Controla o quanto a sombra se espalha

👉 Positivo = sombra maior<br />👉 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