Box shadows

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

Box shadow levels

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

<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>

Notes on box shadows

1. The bs suffix units -1 through -5 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 (not pointing toward bottom-right or bottom-left).

Box shadows on hover

Since v.5.0.6 Codebase has hover states for each of the 5 levels of box shadows. Hover the panels below to see them in action

Removing box shadows

Codebase has the CSS class bs-0 that can be added programmatically (e.g. by AlpineJS) to remove box shadows under various conditions). Similarly, any of the box shadows above can be progamatically added under various conditions.

Since v.5.0.7 Codebase also has responsive box shadow removal. Sometimes you want to remove box shadow at a box shadow on a box below or above a breakpoint (xs, sm, md, or lg).

Example 1: you may have an offcanvas sidebar (requiring a box shadow) on small screens that becomes a normal on-canvas panel (requiring no box shadow) for medium screens up.

Example 2: you may have a box that is part of the page (or part of an offcanvas sidebar) for small screens, but the box becomes a dropdown panel (requiring a box shadow) for medium screens up.