Box Shadows

A few box shadows, to take your design to a new level! 😂

Inspiration for these layered box shadows is from Tobias Ahlin Bjerrome’s excellent blog post on smoother & sharper shadows with layered box-shadows.

The units are meant to represent layer “lifts” along the z-axis. The higher a layer is lifted from the page, the less sharpness and more spread it has.

.bs-1 / .bs-2 (alias .bs) / .bs-3

Box shadows are not clearly visible in the dark theme, of course. So, you may prefer to pair a box shadow with a border, same as I have done in the first card component example.