Box shadow utilities

Utility classes which can be used to set the box-shadow of elements.

Notation #

The utility classes available for setting the box-shadow include .shadow-none (removes all shadows), and .shadow (sets the default shadow). Moreover, small and large shadows can also be set using the .shadow-sm and .shadow-lg classes respectively. These classes are shown in action in the example below.

.shadow-none
.shadow-sm
.shadow
.shadow-lg
HTML
<!-- No shadow -->
<div class="shadow-none">
  ...
</div>

<!-- Small shadow -->
<div class="shadow-sm">
  ...
</div>

<!-- Default shadow -->
<div class="shadow">
  ...
</div>

<!-- Large shadow -->
<div class="shadow-lg">
  ...
</div>
Up next
Color utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.