Box shadow

Box shadows are visual effects which displays elements with a shadow. You can access text shadows by selecting a text element and going to Style panel > Effects > Box shadows.

In this lesson, you’ll learn:

1. How to create box shadow transitions
2. How to create box shadow borders

How to create box shadow transitions

You can add box shadow transitions so when site visitors interact with the element, the box shadow changes its appearance. For example, you can add a hover effect to an element that will make the box shadow’s color grow darker when someone hovers over the element:

1. Select the element you want to add a box shadow transition to
2. Go to Style panel > Effects > Box shadows
3. Click the “plus” icon to add a box shadow
4. Change the color to black and add 20% opacity
5. Add a box shadow to an element and style with black color and 20% opacity
6. Select Hover from from the States dropdown
7. Go to Style panel > Effects > Box shadows
8. Set the box shadow to 55% opacity
9. Select None from the States dropdown
10. Go to Style panel > Effects > Transitions
11. Click the “plus” icon to add a transition
12. Select Box shadow from the Type dropdown
13. Set a Duration or leave it at the default 200ms

After you add the transition, the hover effect is a smooth fade between the None state and the Hover state. Without the 200ms transition, the hover effect would cut abruptly back and forth between the opacity levels.

How to create box shadow borders

You can add multiple box shadows on a single element to create unique visual effects. Here’s an example of how to create a subtle border and shadow using multiple box shadows:

1. Select the element you want to add a box shadow transition to
2. Go to Style panel > Effects > Box shadows
3. Click the “plus” icon to add a box shadow
4. Select Outside as the Type
5. Change the X and Y values as preferred
6. Set Blur to 0px
7. Set Size to 1 px
8. Set Color to rgba(0,0,0,0.1) - black with 10% opacity
9. Set the color of the shadow rgba(0, 0, 0, 0.1) (i.e., black with 10% opacity)
10. Go to Style panel > Effects > Box shadows
11. Click the “plus” icon to add another box shadow
12. Set Blur to 8px
13. Change the X and Y values as preferred
14. Set Color to rgba(0, 0, 0, 0.1)