Shadow Helper Classes

Utility classes for applying box shadows to an element.

TIP

.h-box-shadow[-xs, sm, md, md-soft, lg, lg-soft, xl, 2xl] applies a box shadow of varying intensity to an element.

• XS/SM: Use for small components like buttons or cards in a dense UI.
• MD/LG: Great for standard cards, dropdown menus, or tooltips.
• XL: Reserved for high-elevation elements like modals or "sticky" floating bars.

h-box-shadow-xs

h-box-shadow-sm

h-box-shadow-md

h-box-shadow-md-soft

h-box-shadow-lg

h-box-shadow-xl

Old Classes

h-box-shadow

h-box-shadow--decent