Creating smooth and realistic shadows in CSS

TL;DR Use multiple CSS box-shadow's on top of each other to create smoother, more realistic looking shadows.

/* Default box-shadow */
.box {
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Create smoother box-shadows by layering multiple
 * shadows with gradually increasing radius and offset */
.shadow-5 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

The excellent full article from Tobias Ahlin:

Smoother & sharper shadows with layered box-shadows

With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects

Visual editor by Philipp Brumm:

brumm.af

Web site created using create-react-app

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter