Shadow

How to apply and adjust shadow within and around parts.

Adjusting the shadow within or around parts is a great way to make your app more aesthetically pleasing. Making parts such as cards slightly more elevated can make a huge difference to the appeal of your page.

Shadow can be cast within a part, or around a part, and can be applied on a scale from 'small' through to 'extra extra large'.

How To Apply Shadows

What Parts Can I Apply Shadow To?

Most parts can have a shadow applied. Any part that has a Decoration Editor on the right menu has the shadow property. This includes buttons, rows and columns, avatars, icons, cards, images, accordions, and more.

How To Use the Shadow Property

Select the part you wish to apply shadow to. Then open the Decoration Editor on the menu, and go to the 'shadow' tab.

Select the size and position of the shadow using the dropdown:

The Shadow Property Editor

You can also choose a color for the shadow. If a color isn't selected, the default shadow color is a pale grey.

Here's an example where an outer shadow is applied to the card on the left, and an inner shadow is applied to the card on the right.

Applying an Outer Shadow and an Inner Shadow, and Selecting a Shadow Color