Creating a Smoother Box Shadow

 468 total views,  2 views today

When light hits an object and a shadow is cast, the shadow can take on a plethora of unique characteristics. If you try to capture the subtleties of a real shadow with box-shadow you will find yourself pretty much out of luck. The box-shadow CSS property isn’t exactly built for expressing these subtleties. It essentially produces a blurred silhouette of an object—you can change its offset, blur radius, spread, and color, but that’s it. We can’t get anywhere near to expressing the complexities and nuances of shadows in real life.

But with a simple CSS technique, we can expand our range of shadow options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

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

/* Smoother Shadow */
.shadow-smooth {
  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);
}

If you look at these two examples, you can see how square and non-expressive the default box-shadow effect (first div) looks compared to the layered box-shadow (second div). We create this effect by creating multiple box-shadows (separating each shadow with a comma), and slightly increasing the offset and blur for every shadow (the box-shadow syntax is X-offset Y-offset blur color):

To further our creativeness with the box shadow, we can  increase the blur  to increase the spread and create softer effect in Div 2:

.soft-shadow {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

In order to create a longer shadow, we can control the distance by decoupling the blur radius and Y-offset, and increase the offset in bigger or smaller increments:

.long-shadow {
  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
              0 4px 2px rgba(0,0,0,0.09), 
              0 8px 4px rgba(0,0,0,0.09), 
              0 16px 8px rgba(0,0,0,0.09),
              0 32px 16px rgba(0,0,0,0.09);
}

Try out some of these techniques in your own build and let us know what you think. If you want an easy way to play around with box-shadow, head over to http://cupocode.com/dev/projects/box-shadow-generator/ and try out a nifty little tool build by Jimmy “Jorts” Feeley, Cup O Code’s junior developer.