DEV Community

Cover image for A quick reference for shadows in CSS
Rob OLeary
Rob OLeary

Posted on • Edited on • Originally published at roboleary.net

A quick reference for shadows in CSS

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.

Top comments (1)

Collapse
 
robole profile image
Rob OLeary

funny