Loading...
Shadow utilities for controlling box shadows and elevation.
Apply box shadows to elements with different sizes and intensities.
.shadow-sm.shadow.shadow-md.shadow-lg.shadow-xl.shadow-2xl.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 */Customize the color of box shadows.
.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-primary.shadow-color-white.shadow-inner.shadow-noneApply shadow utilities at specific breakpoints.
/* 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<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><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><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><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">