Rich Box-shadow

A quick sketch to show how building box shadows creates a richer visual appearance.


Layer Three

box-shadow:
0 4px 20px 0
rgba(0, 0, 0, 0.12);

Layer Two

box-shadow:
0 12px 4px -8px
rgba(0, 0, 0, 0.2);

Layer One

box-shadow:
0 8px 8px 0
rgba(0, 0, 0, 0.14);

Rich box shadows are more realistic

They are key to material design

And they look dope!

Copy the template here!

box-shadow:
    0 8px 8px 0 rgba(0, 0, 0, 0.14),
    0 12px 4px -8px rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.12);
handmade-icon