Shadows

Shadow utilities for controlling box shadows and elevation.

Shadow Scale

Apply box shadows to elements with different sizes and intensities.

.shadow-sm

base

.shadow

.shadow-md

.shadow-lg

.shadow-xl

2xl

.shadow-2xl

CSS

.shadow-sm    /* Small shadow for subtle elevation */
.shadow       /* Default shadow */
.shadow-md    /* Medium shadow */
.shadow-lg    /* Large shadow */
.shadow-xl    /* Extra large shadow */
.shadow-2xl   /* 2x extra large shadow */
.shadow-none  /* No shadow */
.shadow-inner /* Inner shadow for inset effect */

Shadow Colors

Customize the color of box shadows.

CSS

.shadow-color-current   /* Use currentColor as shadow color */
.shadow-color-primary   /* Use primary color */
.shadow-color-black     /* Black shadow color */
.shadow-color-white     /* White shadow color */

/* Color-specific shadows */
.shadow-primary         /* Primary color shadow */
.shadow-primary-sm      /* Small primary shadow */
.shadow-primary-md      /* Medium primary shadow */
.shadow-primary-lg      /* Large primary shadow */

Shadow Color Examples

Primary

.shadow-primary

White

.shadow-color-white

Inner

.shadow-inner

None

.shadow-none

Responsive Shadows

Apply shadow utilities at specific breakpoints.

CSS

/* Small screens and up */
.sm:shadow-sm .sm:shadow .sm:shadow-md .sm:shadow-lg .sm:shadow-xl .sm:shadow-2xl .sm:shadow-none .sm:shadow-inner

/* Medium screens and up */
.md:shadow-sm .md:shadow .md:shadow-md .md:shadow-lg .md:shadow-xl .md:shadow-2xl .md:shadow-none .md:shadow-inner

/* Large screens and up */
.lg:shadow-sm .lg:shadow .lg:shadow-md .lg:shadow-lg .lg:shadow-xl .lg:shadow-2xl .lg:shadow-none .lg:shadow-inner

/* Extra large screens and up */
.xl:shadow-sm .xl:shadow .xl:shadow-md .xl:shadow-lg .xl:shadow-xl .xl:shadow-2xl .xl:shadow-none .xl:shadow-inner

/* 2x extra large screens and up */
.xxl:shadow-sm .xxl:shadow .xxl:shadow-md .xxl:shadow-lg .xxl:shadow-xl .xxl:shadow-2xl .xxl:shadow-none .xxl:shadow-inner

Common Patterns

Card Elevation on Hover

HTML

<div class="bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
  <div class="p-4">
    <h3>Card Title</h3>
    <p>Card content with elevation on hover</p>
  </div>
</div>

Modal with Prominent Shadow

HTML

<div class="fixed inset-0 bg-black/50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-2xl p-6 max-w-md w-full mx-4">
    <h2>Modal Title</h2>
    <p>Modal content with prominent shadow</p>
  </div>
</div>

Dropdown Menu Shadow

HTML

<div class="relative inline-block">
  <button>Toggle Menu</button>
  <div class="absolute z-10 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Item 1</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Item 2</a>
  </div>
</div>

Inset Shadow Input

HTML

<input type="text"
       class="shadow-inner bg-gray-50 border border-gray-300 rounded px-3 py-2
              focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
       placeholder="Inset shadow input">