Designing Beautiful Shadows in CSS

Adding shadows on the web isn’t that hard: slap a CSS box-shadow onto an element and you’re done. But as Josh W. Comeau points out, making a good, life-like, shadow is hard.

When I look around the web, though, it’s clear that most shadows aren’t as rich as they could be. The web is covered in fuzzy grey boxes that don’t really look much like shadows.

In this tutorial, we’ll learn how to transform typical box-shadows into beautiful, life-like ones.

Josh wouldn’t be Josh if there weren’t a ton of interactive widgets contained in the post.

Designing Beautiful Shadows in CSS →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.