Box shadow

In this lesson:

1. Transition shadows
2. Create borders with box shadows

Transition shadows

You can add transitions to box shadows so that interactions with them will be smooth. For example, you can add a hover effect to an element that will make the box shadow’s color grow darker. Here are the steps:

1. Add a box shadow to an element and style with black color and 20% opacity
2. From the States menu, select Hover
3. Style the box shadow to have 55% opacity
4. Go back to the States menu and select None (normal)
5. At the bottom of the Style panel, under Effects add a transition and select Box shadow from the list
6. Set the transition time, or leave it at the default 200ms

Notice that 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. You can style the hover or pressed states with the box shadow anyway you’d like.

Create borders with box shadows

You can add multiple box shadows on a single element to create unique visual effects.

Learn more about box shadows and other effects.

Here’s an example of how to create a subtle border and shadow using multiple box shadows:

1. Add an outside drop shadow and set the Blur and Distance to 0px and Size to 1px
2. Set the color of the shadow rgba(0,0,0,0.1) - black with 10% opacity
3. Add a second outside drop shadow. Set the Blur to 8px and Distance to 2px.
4. Set the color also to rgba(0,0,0,0.1)