Box Shadow

Controls the box shadow of an element.

Class	Properties
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);

<div class="d-g g-16 gtc-4">
    <div class="bg-white bs-xs dim-16 fw-700 ins rad-2 tc-cyan">xs</div>
    <div class="bg-white bs-sm dim-16 fw-700 ins rad-2 tc-cyan">sm</div>
    <div class="bg-white bs-md dim-16 fw-700 ins rad-2 tc-cyan">md</div>
    <div class="bg-white bs-lg dim-16 fw-700 ins rad-2 tc-cyan">lg</div>
</div>

---

Using breakpoints

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 variants

Using :hover variants 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>