3 cool tricks CSS box shadow can do

CSS box-shadow trick!

  1. Using box-shadow to duplicate, so you don’t have to create more divs.
box-shadow:
0 120px 0 $eggshell, 120px 0 0 $eggshell,
80px 40px 0 $eggshell, 0 80px 0 $eggshell,
80px 0 0 $eggshell, 40px 80px 0 $eggshell,
40px 40px 0 $eggshell, 0 40px 0 $eggshell, 40px 0 0 $eggshell;

$eggshell, is a SASS way of declaring variables, $eggshell is assigned to the color #F3E9D2.

2. Using box-shadow as shadow and inset-shadow, the most common usage.

box-shadow:
inset 10px 10px 0 rgba(#523E6B, 0.2),
10px 10px 0 rgba(#523E6B, 0.2);

3. Using box-shadow to make gradient background.

box-shadow:
inset 0 40px 0 #FDC5F5, inset 0 41px 0 #FFD4CA,
inset 0 80px 0 #F7AEF8, inset 0 81px 0 #FFD4CA,
inset 0 120px 0 #B388EB, inset 0 121px 0 #FFD4CA,
inset 0 160px 0 #8093F1, inset 0 161px 0 #FFD4CA,
inset 0 200px 0 #31ACD8;

Check out the code for this on Codepen http://codepen.io/sashatran/pen/VPNZEe

What else do you use box-shadow for? Let me know!

Let’s connect: Twitter