Box Shadow

Utility	Properties
Error: 429

This example showcases various box-shadow utilities:

• The bs-xs box shadow utility applies an extra small shadow to an element.
• The bs-sm box shadow utility applies a small shadow to an element.
• The bs-md box shadow utility applies a medium shadow to an element.
• Finally, bs-lg box shadow utility applies a large to an element.

xs

sm

md

lg

<div class="d-g g-16 gtc-1 sm:gtc-4">
  <div class="ai-c bg-white bs-xs d-f d-18 jc-c rad-1">xs</div>
  <div class="ai-c bg-white bs-sm d-f d-18 jc-c rad-1">sm</div>
  <div class="ai-c bg-white bs-md d-f d-18 jc-c rad-1">md</div>
  <div class="ai-c bg-white bs-lg d-f d-18 jc-c rad-1">lg</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

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

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

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

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