A quick reference for shadows in CSS

Rob OLeary - Mar 22 '21 - - Dev Community

Shadows add physical realism. When used well, they can help create interfaces that pop. 🍾

You will reach for different properties depending on what type of element you are targeting, and what it is you want to do.

syntax summary

The codepen below allows you to play with the box-shadow property to understand the effect the different parameters have on the shadow.

Below is a summary of what you can do with shadows.


You can subscribe to my RSS feed to get the latest articles I publish.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .