shadow-sm…shadow-2xl, shadow-inner, shadow-none — plus colored shadows. This family contains 256 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
shadow-sm--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-md--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-lg--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-xl--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-2xl--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-inner--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-none--tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-glow--tw-shadow: 0 0 20px 0 rgba(59, 130, 246, 0.5); --tw-shadow-colored: 0 0 20px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-inherit--tw-shadow-color: inherit; --tw-shadow: var(--tw-shadow-colored);
shadow-current--tw-shadow-color: currentColor; --tw-shadow: var(--tw-shadow-colored);
shadow-transparent--tw-shadow-color: transparent; --tw-shadow: var(--tw-shadow-colored);
shadow-black--tw-shadow-color: #000; --tw-shadow: var(--tw-shadow-colored);
shadow-white--tw-shadow-color: #fff; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-50--tw-shadow-color: #f8fafc; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-100--tw-shadow-color: #f1f5f9; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-200--tw-shadow-color: #e2e8f0; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-300--tw-shadow-color: #cbd5e1; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-400--tw-shadow-color: #94a3b8; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-500--tw-shadow-color: #64748b; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-600--tw-shadow-color: #475569; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-700--tw-shadow-color: #334155; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-800--tw-shadow-color: #1e293b; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-900--tw-shadow-color: #0f172a; --tw-shadow: var(--tw-shadow-colored);
shadow-slate-950--tw-shadow-color: #020617; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-50--tw-shadow-color: #f9fafb; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-100--tw-shadow-color: #f3f4f6; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-200--tw-shadow-color: #e5e7eb; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-300--tw-shadow-color: #d1d5db; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-400--tw-shadow-color: #9ca3af; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-500--tw-shadow-color: #6b7280; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-600--tw-shadow-color: #4b5563; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-700--tw-shadow-color: #374151; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-800--tw-shadow-color: #1f2937; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-900--tw-shadow-color: #111827; --tw-shadow: var(--tw-shadow-colored);
shadow-gray-950--tw-shadow-color: #030712; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-50--tw-shadow-color: #fafafa; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-100--tw-shadow-color: #f4f4f5; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-200--tw-shadow-color: #e4e4e7; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-300--tw-shadow-color: #d4d4d8; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-400--tw-shadow-color: #a1a1aa; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-500--tw-shadow-color: #71717a; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-600--tw-shadow-color: #52525b; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-700--tw-shadow-color: #3f3f46; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-800--tw-shadow-color: #27272a; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-900--tw-shadow-color: #18181b; --tw-shadow: var(--tw-shadow-colored);
shadow-zinc-950--tw-shadow-color: #09090b; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-50--tw-shadow-color: #fafafa; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-100--tw-shadow-color: #f5f5f5; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-200--tw-shadow-color: #e5e5e5; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-300--tw-shadow-color: #d4d4d4; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-400--tw-shadow-color: #a3a3a3; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-500--tw-shadow-color: #737373; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-600--tw-shadow-color: #525252; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-700--tw-shadow-color: #404040; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-800--tw-shadow-color: #262626; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-900--tw-shadow-color: #171717; --tw-shadow: var(--tw-shadow-colored);
shadow-neutral-950--tw-shadow-color: #0a0a0a; --tw-shadow: var(--tw-shadow-colored);
shadow-stone-50--tw-shadow-color: #fafaf9; --tw-shadow: var(--tw-shadow-colored);
shadow-stone-100--tw-shadow-color: #f5f5f4; --tw-shadow: var(--tw-shadow-colored);

…and 196 more in this family — search by class name to find the exact one.

Example#

example
html
<div class="shadow-lg hover:shadow-xl transition p-6 rounded-xl">Elevated card</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:shadow-lg style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Elevation ladder: sm → md → lg → xl; hover raises one step
  • Colored shadows: shadow-blue-500/40 for glowing CTAs

Common mistakes#

  • Shadow on a transparent-bg element looks dirty — give it a surface

utilities/effects/backdrop-filter|Backdrop filters · utilities/effects/opacity|Opacity