Getting that inset of the box-shadow right

A little CSS problem that’s been bugging me for some time is the inability to set an inset box shadow, for one side only.

You see, if I do box-shadow: inset -12px 0 15px rgba(0, 0, 0, .6); it will give me this result:

Today, I set off to find a proper solution to the problem and it was much easier than I could have imagined. There is a fourth attribute for the box-shadow propery which controls the spread radius. By using a negative unit for the spread radius; I could actually position the shadow outside the box and then bring it back to view only for the side I want. Simple. box-shadow: inset -12px 0 15px -10px rgba(0, 0, 0, .6);

You can see the result in the pen below.