Using Box Shadows as Gradients

February 15, 2012 at 6:00 pm By

Why would I?

box-shadow is smaller and much easier to remember than the quite complex gradient syntax that we have at the moment. Plus, box-shadow boasts more support than the gradient properties.

You can’t apply a gradient to a box-shadow either. If you take a look at these buttons posted a while ago, you’ll notice that there’s a slight gradient on the shadow. That’s just multiple box-shadows to give the illusion of a gradient:

box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4),

We can layer box-shadows to create awesome effects. Recently I’ve taken to using box-shadow as a pseudo color to transparent gradient. All you have to do is give it a blur of 10px or more, make it inset, and I usually move it in the direction I want the gradient to flow in. That way you hide one side of the shadow so it seems more like a shadow. The 4th number in the box-shadow property is the spread, so we only get one direction of shadow (in this case, a shadow going from the top down), since we made it negative so it spreads more widely.

box-shadow: inset 0px 100px 200px -70px rgba(255,255,255,0.4);

It can lead to some nice effects, and in some scenerios may be even more beneficial than the actual gradient property.


An example