> ## 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.

# Usa la sombra para dar profundidad y estilo

> Añade sombras para crear profundidad, destacar elementos y mejorar la jerarquía visual del diseño de tus landing pages.

Box Shadow añade profundidad a tus elementos creando un efecto de sombra a su alrededor. Ayuda a que destaquen y da a tu diseño un aspecto más moderno y con capas.

### Cómo funciona

Una sombra se compone de varios ajustes que controlan su aspecto y su comportamiento.

***

<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>

## Ajustes de la sombra

### Preset

* Aplica rápidamente un estilo de sombra predefinido (por ejemplo, Small, Medium, Large)
* Ideal para trabajar rápido y con coherencia

***

### Type

* **Outer Shadow:** aparece por fuera del elemento (lo más habitual)
* **Inner Shadow:** aparece por dentro del elemento

***

### Size (X e Y)

* Controla la posición de la sombra
* **X (horizontal):** la desplaza a izquierda o derecha
* **Y (vertical):** la desplaza arriba o abajo

👉 Ejemplo:

* X: 0, Y: 4 → la sombra queda ligeramente por debajo del elemento

***

### Blur

* Controla lo suave que es la sombra

👉 Valor más alto = sombra más suave<br />👉 Valor más bajo = sombra más marcada

***

### Spread

* Controla cuánto se extiende la sombra

👉 Positivo = sombra más grande<br />👉 Negativo = sombra más ceñida

***

### Color

* Define el color de la sombra (normalmente negro o gris con transparencia)

👉 Lo habitual: `rgba(0, 0, 0, 0.1-0.3)` para sombras suaves

***

## Varias sombras

* Puedes hacer clic en **+ Add** para superponer varias sombras
* Es útil para efectos más avanzados o por capas