Box Shadow

Controls the box shadow of an element.

Class	Property
bs-none	box-shadow: none;
bs-xs	box-shadow: 1px 3px 5px -3px rgba(0,0,0,0.1);
bs-sm	box-shadow: 1px 3px 5px -2px rgba(0,0,0,0.1);
bs-md	box-shadow: 1px 3px 5px -1px rgba(0,0,0,0.1);
bs-lg	box-shadow: 1px 3px 5px 1px rgba(0,0,0,0.1);
bs-xl	box-shadow: 1px 3px 5px 2px rgba(0,0,0,0.1);

sm

md

lg

xxl

<div class="d-g g-16 gtc-4">
  <div class="ai-c bg-l-silver-6 bs-xs d-f dim-18 jc-c rad-2">sm</div>
  <div class="ai-c bg-l-silver-6 bs-sm d-f dim-18 jc-c rad-2">md</div>
  <div class="ai-c bg-l-silver-6 bs-md d-f dim-18 jc-c rad-2">lg</div>
  <div class="ai-c bg-l-silver-6 bs-lg d-f dim-18 jc-c rad-2">xxl</div>
</div>

---

Using responsive modifiers

Using responsive breakpoints like sm:bs-*, md:bs-*, lg:bs-*, and xxl:bs-* allows targeting specific utilities in different viewports.

<div class="bs-sm md:bs-md ..."></div>

Using hover modifiers

Using :hover modifiers such as h:bs-* allows you to override elements and change their values when hovering over them.

<div class="bs-sm h:bs-md ..."></div>