Box shadows

Box shadows can take your design to a new level. 😂 #bantz

Box shadow levels

• bs-1 / bs-2 / bs-3 / bs-4 / bs-5 / bs-6

<div class="bs-1">...</div>
<div class="bs-2">...</div>
<div class="bs-3">...</div>
<div class="bs-4">...</div>
<div class="bs-5">...</div>
<div class="bs-6">...</div>

Inner shadow levels

• bsi-1 / bsi-2 / bsi-3 / bsi-4 / bsi-5

<div class="bsi-1">...</div>
<div class="bsi-2">...</div>
<div class="bsi-3">...</div>
<div class="bsi-4">...</div>
<div class="bsi-5">...</div>

Notes on box shadows

1. The bs suffix units -1 through -6 are meant to represent layer “lifts” along the z-axis.
2. The higher a layer is lifted from the page, the less sharpness and more spread the box shadow has. This also means that the higher the suffix, the fainter the shadow becomes as it is spread over a wider area.
3. Lighting is from the front top center, so more of the shadow is cast at the bottom the element.