Shadows can be added to the majority of elements within Shogun! To get started, drag an element onto your page - we are going to be using the Section Element for this article.

Once you have your element in place, click on it and navigate to the righthand menu of the element. Click on the Styles tab, then scroll down to Box Shadow.

Changing the color of the box shadow

Once you open up the options for the box shadow, you will be presented with color options that you can configure to your linking. The opacity of the shadow can be changed by using the slider bar below the color selector or by changing the value of the "A" field.

Changing the appearance of your box shadow

In addition to color, there are 4 more fields that can be used to change the appearance of the shadow:

  • Horizontal offset determines how much of the shadow appears on the side of the element. A negative horizontal offset will create a shadow on the left side of the element. A positive horizontal offset will appear on the right side.
  • Vertical offset determines how much of the shadow appears on the top or bottom of the element. A negative horizontal offset will create a shadow on the top side of the element. A positive horizontal offset will appear on the bottom side.
  • Blur softens the edge of the shadow, which can help give it a more natural appearance.
  • Spread determines the size of the box shadow. Increasing the spread will cause the shadow to expand outward. Decreasing the spread will pull it back in.

Experimenting with these settings is a great way to see their effects in action and to add depth to your designs.

Did this answer your question?