> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/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/ttFYL1GC4O0eQWyS/images/property-panels/shadow-1.png?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=c209ed2c30de1a950caa7da62039423a" 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/ttFYL1GC4O0eQWyS/images/property-panels/shadow-3.png?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=2ed1573797d804c2ed8f2c503a87c013" 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/ttFYL1GC4O0eQWyS/images/property-panels/shadow-2.gif?s=cb38631445b87b025c7eae506933d412" 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.
