> This page is for Product.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

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

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

![](/_fern-img/ba56ccd6066d8f262e58336fc653e02f1cbef5d73f40c49bfe818a03d4599c6b.webp)

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

![Applying shadows to cards](/_fern-img/e7d54feb13a2adcfb11774f4a873798a69ca83f9ef47f63aaac7c88f666c0f3c.webp)

## Examples

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

![Shadow angle and color](/_fern-files/makeswift.docs.buildwithfern.com/1cdb6dc35008ca2e8435110d35f96c06a7e4393acdef1115649a7543d2d8edd8/images/property-panels/shadow-2.gif)

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