Inner shadows give components depth.

🌚🌘🌗🌖🌕

To add an inner shadow you must first select a component. Once selected, the component's details will occupy the Right Pane. From this pane you can add an inner shadow. Newly added components do not have inner shadows; however, there is no limit to the number one can have.

Click the grey "+" to add an inner shadow or the red "x" to remove one.

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

Editing an Inner Shadow

Inner shadows are highly configurable. When you add an inner shadow its color is set to the first color in your theme's 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 inner shadow's left circle accesses the following:

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

You can also change the direction of the inner shadow by dragging the caret around the inner shadow's left circle.

There are three input fields for each inner shadow:

  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?