Box shadow utilities Since v1.1.0+

Halfmoon comes with utility classes which can be used to set the box shadow of elements.

Classes #

The class names for the box shadow utilities come in the following formats:

  • .shadow-none removes any shadow by setting the box-shadow: none property.
  • .shadow adds the default box shadow.
  • .shadow-sm/.shadow-lg adds a small or large box shadow, depending on the specified size.
.shadow-none
.shadow-sm
.shadow
.shadow-lg
<!-- No box shadow -->
<div class="shadow-none">
   ...
</div>
<!-- Small box shadow -->
<div class="shadow-sm">
   ...
</div>
<!-- Default box shadow -->
<div class="shadow">
   ...
</div>
<!-- Large box shadow -->
<div class="shadow-lg">
   ...
</div>