Using Multiple Box Shadows

One box shadow is nice, but adding even more can produce some really complex and interesting effects.

We can have as many as we want, as long as they are all separated by a comma:

.shadows {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4),
              0 0 20px 0 rgba(0,0,0,0.2);
}

Stacking them can create some interesting effects, like here where I've stacked different colors, but positioned them differently around the element:

.shadows {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4),
              4px 4px 10px 2px rgba(100,100,250,0.4),
              -4px 4px 10px 2px rgba(250,100,100,0.4),
              -4px -4px 10px 2px rgba(100,250,100,0.4),
              4px -4px 10px 2px rgba(250,250,100,0.8);
}

This is definitely a fun one to play around with! Check out my Codepen if you want to try it out: https://codepen.io/michaelthiessen/pen/VwPzqOB?editors=1100