More realistic shadows with CSS

I discovered Lance Thackeray’s tweet on difference between single dropshadow and 3-layer dropshadows with color, and just wanted to see how difficult to reproduce it in CSS.

See the Pen More realistic shadows with CSS by Hyungtak Jun (@hjun) on CodePen.

The way to do this was actually super-simple. I didn’t know that box-shadow takes multiple shadows with comma separation, which is exactly what I need to make this. I put three different shadows with different values, and one of them has the same color as the box. It’s not a huge difference, but definitely looking more realistic.