Box Shadow
box-shadow
is a popular CSS property to use. It allows you to place a shadow behind an element. It’s used very frequently within Google’s Material Design language to convey depth and elevation.
Box shadow has been here for a while so browser support is solid https://caniuse.com/#feat=css-boxshadow
Playground
Below are some sliders to play around with some box-shadow
values. In this case, I use 5 values to set the box shadow: offset-x
, offset-y
, blur radius
, spread radius
and color
. This is the full declaration of a CSS box shadow with all of its properties.
Optionally, you can have an inset box-shadow
by placing inset
at the start of the box shadow value. This places the box shadow inside of the element.
Note: Having a negative blur radius is invalid and will result in your box shadow to not render.
Box Shadow
.element {
box-shadow: 10px 10px 5px 0px #194d33;
}
There are also more compact ways of declaring CSS box shadows. Another format is with offset-x
, offset-y
, color
.
Box Shadow
.element {
box-shadow: 10px 10px #194d33;
}
Or you could use offset-x
, offset-y
, blur-radius
, color
to declare box shadows.
Box Shadow
.element {
box-shadow: 10px 10px 5px #194d33;
}
Stacking Box Shadows
You can also stack multiple box shadows. All you need to do is comma separate multiple box-shadow values. Box shadows declared last will appear behind box shadows declared at the start.
Box Shadow
.element {
box-shadow: 10px 10px 2px #AED581, -10px -10px 4px #FFF176, -10px 10px 6px #F06292;
}
Extra
Box shadows will match the same shape as the element. If you have a circular element, then the box shadow will be circular as well.
Border Radius
.element {
border-radius: 0px;
}
Conclusion
Box shadows are really great. Seriously go use these if your design could use them. If this helped you out, feel free to share this with others.
Here is a link to complete box-shadow
documentation on the MDN website