A quick reference for shadows in CSS

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

The summary below outlines the different methods for creating shadows.

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.

See the Pen box-shadow playground by Rob (@robjoeol) on CodePen.

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

See the Pen Shadow Showcase by Rob (@robjoeol) on CodePen.