Box Shadows are a great way to have content be more dynamic on the page. They are best applied to a parent container, buttons, or an image. Below are some examples but you can use the following link to help generate and understand more on how to use these to your advantage!
For more advanced shadows consider using the drop shadow property.
Box Shadow Light
.boxshadow-light{
box-shadow:0px 0px 5px 5px rgba(18, 18, 18, 0.1);
}
Box Shadow Hard
.boxshadow-hard{
box-shadow:5px 5px 0px 0px black;
}
Box Shadow with Rounded edges – Box shadows follow the container’s radius
.boxshadow-regular{
box-shadow:0px 0px 10px 10px rgba(18, 18, 18, 0.15);
}
Box Shadow Layers – Combine multiple shadows into 1 line with a comma
.boxshadow-layers{
box-shadow: -5px -5px 0px 0px #3F76DB, -10px -10px 0px 0px #37B9D3;
}
Combining Box Shadows with a negative margin is a great way to add “layers” to a page!