A quick reference for shadows in CSS

by Rob O'Leary on
A rectange with a pinkish purple gradient is casting an oblique shadow in a south-east direction. In the north-west of the image is a light bulb.

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.

Tags