Lesson 41 +20 XP

Effects Cheatsheet

Effects Cheatsheet

Shadows

Goal	Classes
Small shadow	`shadow-sm`
Default	`shadow`
Large	`shadow-lg` / `shadow-xl`
Colored	`shadow-md shadow-sky-500/20`
Inner	`inset-shadow-sm`
Drop shadow (logo)	`drop-shadow-lg`

Opacity & blend

Goal	Classes
50% opacity	`opacity-50`
Multiply blend	`mix-blend-multiply`
Screen blend	`mix-blend-screen`
Isolate blending	`isolate`

Filters

Goal	Classes
Blur	`blur-md`
Gray	`grayscale`
Invert	`invert`
Sepia	`sepia`
Brighten	`brightness-150`
Saturate	`saturate-150`
Hue rotate	`hue-rotate-90`
Drop shadow	`drop-shadow-lg`

Backdrop filters

Goal	Classes
Blur backdrop	`backdrop-blur-md`
Gray backdrop	`backdrop-grayscale`
Brighten backdrop	`backdrop-brightness-110`
Glassmorphism	`bg-white/10 backdrop-blur-md`

Common patterns

Hover grayscale: grayscale hover:grayscale-0 transition
Glass navbar: bg-white/80 backdrop-blur-md sticky top-0
Colored glow: shadow-lg shadow-sky-500/30

TL;DR

shadow- and drop-shadow- for depth.
mix-blend- vs bg-blend- (backdrop vs own backgrounds).
backdrop-blur-* enables glassmorphism.
Filters combine and don't affect layout.