Use box shadows to add depth inside or outside of element boundaries.
In this lesson:
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:
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.
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: