Skip to main content
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.
Image

​
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
👉 Valor más bajo = sombra más marcada

​
Spread

  • Controla cuánto se extiende la sombra
👉 Positivo = sombra más grande
👉 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