Drop shadows give components depth.

🌕🌖🌗🌘🌚

To add an drop shadow you must first select a component. Once selected, the component's details will occupy the Right Pane. From this pane you can add drop shadows. Newly added components do not have drop shadows; however, there is no limit to the number one can have. Clicking the grey "+" below would add a drop shadow and the red "x" would remove one:

Drop shadows stack in the order you add them. Change the stacking order by dragging the drop shadow, by its left handle, up or down - release at the desired position:

Editing a Drop Shadow

Drop shadows are highly configurable. When you add a drop shadow its color is set to the first color in your theme's color palette. The input fields on the right change the offset, blur, and spread. Clicking the circle on the left accessing color, tint, shade, and opacity - it's been clicked here:

Clicking on a drop shadow's left circle accesses the following:

  • Change color
  • Add shade
  • Add tint
  • Adjust opacity

Change the direction of the drop shadow by dragging the caret around the drop shadow's left circle.

Each drop shadow has these three input fields:

  1. Offset - increasing the offset will expand the shadow in the direction of the caret on the circular color widget.
  2. Blur - increasing the blur will make the shadow bigger and lighter.
  3. Spread - increasing the spread will expand the entire shadow.

Relevant Help Articles:

Did this answer your question?