Box Shadow
Utilities for controlling the box shadow of an element.
CSS Property:
box-shadowClasses:8
Box Shadow Classes
| Class | CSS | |
|---|---|---|
shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
shadow | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | |
shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); | |
shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); | |
shadow-inner | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); | |
shadow-none | box-shadow: 0 0 #0000; |
Arbitrary Values
You can use arbitrary values with square bracket notation when you need a specific value not included in the default scale.
[box-shadow:value]Responsive Variants
Apply box shadow utilities at specific breakpoints using responsive prefixes.
| Breakpoint | Prefix | Example |
|---|---|---|
| 640px+ | sm: | sm:shadow-sm |
| 768px+ | md: | md:shadow-sm |
| 1024px+ | lg: | lg:shadow-sm |
| 1280px+ | xl: | xl:shadow-sm |
| 1536px+ | 2xl: | 2xl:shadow-sm |
Related Utilities
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Aa
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow