Effects
Drop Shadow
Utilities for controlling the drop shadow of an element.
Quick reference
| Class | Description |
|---|---|
drop-shadow-s | filter: drop-shadow(rgba(64, 64, 64, .16) 0 1px 6px) drop-shadow(rgba(64, 64, 64, .24) 0 1px 1px) |
drop-shadow-m | filter: drop-shadow(rgba(64, 64, 64, .24) 0 3px 8px) drop-shadow(rgba(64, 64, 64, .16) 0 3px 6px) |
drop-shadow-l | filter: drop-shadow(rgba(64, 64, 64, .23) 0 6px 8px) drop-shadow(rgba(64, 64, 64, .19) 0 10px 20px) |
drop-shadow-xl | filter: drop-shadow(rgba(64, 64, 64, .22) 0 9px 12px) drop-shadow(rgba(64, 64, 64, .25) 0 14px 28px) |
Basic usage
Adding a drop shadow
Use the drop-shadow-s, drop-shadow-m, drop-shadow-l, drop-shadow-xl utilities to apply different sized drop shadows to images.
drop-shadow-s
drop-shadow-m
drop-shadow-l
drop-shadow-xl
html
<img src="..." class="drop-shadow-s ..." />
<img src="..." class="drop-shadow-m ..." />
<img src="..." class="drop-shadow-l ..." />
<img src="..." class="drop-shadow-xl ..." />Applying conditionally
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:drop-shadow-m to apply the drop-shadow-m utility at only medium screen sizes and above.
html
<div class="drop-shadow-s md:drop-shadow-m"></div>