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>

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.