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

# Shadows

> Boxes can have shadows to give them a more real-world, dimensional feel. Add shadows by clicking the “+” in the “Shadows” panel located in the sidebar.

Here are the following options for shadows:

* Type: drop or inner shadow
* Color
* Direction
* Distance: how far the shadow is from its element
* Blur: the softness of the shadow
* Spread: when blur is set to “0”, a larger size will act like a solid border

<Frame>
  <img width="300" src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/shadow-1.png?fit=max&auto=format&n=qFmu781C7ke_MJk2&q=85&s=02ca35372afc2e9900a22a76192ad7d1" data-path="images/property-panels/shadow-1.png" />
</Frame>

An element can have multiple shadows which can be layered and sorted,
allowing you to add more realistic shadows or create unique effects.

<Frame>
  <img src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/shadow-3.png?fit=max&auto=format&n=qFmu781C7ke_MJk2&q=85&s=4cdd9eeacc47ee2051c158c615b43519" alt="Applying shadows to cards" width="468" height="226" data-path="images/property-panels/shadow-3.png" />
</Frame>

## Examples

You can change the color and angle of your shadow to add a glowing effect to a specific element.

<Frame>
  <img src="https://mintcdn.com/makeswift-docs-branch/qFmu781C7ke_MJk2/images/property-panels/shadow-2.gif?s=b1a00f59e90fac5a238fc5b3d2e978d9" alt="Shadow angle and color" width="800" height="450" data-path="images/property-panels/shadow-2.gif" />
</Frame>

## Pro tips

Avoid importing assets with shadows included in the original file, as this can be added in Makeswift.

Another tip is to lower the color opacity and use a higher blur to create softer, more realistic shadows.
