Tailwind CSS Effects Cheatsheet
Complete reference for shadows, filters, blur, and visual effects.
All Tailwind v4 effects utilities in one place.
Box Shadow
Apply shadow effects to elements. Use shadow-{color} to colorize shadows.
shadow-smshadowshadow-mdshadow-lgshadow-xlshadow-2xlshadow-innershadow-noneShadow Colors
shadow-red-500/50shadow-blue-500/50shadow-green-500/50shadow-purple-500/50Drop Shadow (Filter)
Unlike box-shadow, drop-shadow respects transparency and works on irregular shapes like images with transparent backgrounds.
drop-shadow-smdrop-shadowdrop-shadow-mddrop-shadow-lgdrop-shadow-xldrop-shadow-2xldrop-shadow-noneTip: Use drop-shadow for transparent PNGs or SVGs. Box-shadow would create a rectangular shadow around the entire element.
Opacity
Control the transparency of elements. See full opacity scale reference
opacity-0opacity-5opacity-10opacity-20opacity-25opacity-30opacity-40opacity-50opacity-60opacity-70opacity-75opacity-80opacity-90opacity-95opacity-100Blur
Apply blur effects to elements using the filter property.
blur-none0pxblur-sm4pxblur8pxblur-md12pxblur-lg16pxblur-xl24pxblur-2xl40pxblur-3xl64pxBrightness
Adjust the brightness of elements. Values below 100 darken, above 100 brighten.
brightness-00brightness-500.5brightness-750.75brightness-900.9brightness-950.95brightness-1001brightness-1051.05brightness-1101.1brightness-1251.25brightness-1501.5brightness-2002Contrast
Adjust the contrast of elements.
contrast-00contrast-500.5contrast-750.75contrast-1001contrast-1251.25contrast-1501.5contrast-2002Grayscale
Convert elements to grayscale.
grayscale-0No effect
grayscaleFull grayscale
Hue Rotate
Rotate the hue of all colors in an element.
hue-rotate-00deghue-rotate-1515deghue-rotate-3030deghue-rotate-6060deghue-rotate-9090deghue-rotate-180180degUse negative values with -hue-rotate-* for counter-clockwise rotation.
Invert
Invert the colors of an element.
invert-0No effect
invertFull invert
Saturate
Adjust the color saturation of an element.
saturate-00saturate-500.5saturate-1001saturate-1501.5saturate-2002Sepia
Apply a sepia tone to an element for a vintage look.
sepia-0No effect
sepiaFull sepia
Backdrop Filter
Apply filter effects to the area behind an element. Perfect for glassmorphism effects.
Glassmorphism Example
backdrop-blur-md bg-white/30
Classic glassmorphism effect
Backdrop Blur Scale
backdrop-blur-none0pxbackdrop-blur-sm4pxbackdrop-blur8pxbackdrop-blur-md12pxbackdrop-blur-lg16pxbackdrop-blur-xl24pxbackdrop-blur-2xl40pxbackdrop-blur-3xl64pxOther Backdrop Filters
Backdrop Brightness
backdrop-brightness-0
backdrop-brightness-50
backdrop-brightness-100
backdrop-brightness-150
backdrop-brightness-200
Backdrop Contrast
backdrop-contrast-0
backdrop-contrast-50
backdrop-contrast-100
backdrop-contrast-150
backdrop-contrast-200
Backdrop Grayscale
backdrop-grayscale-0
backdrop-grayscale
Backdrop Saturate
backdrop-saturate-0
backdrop-saturate-50
backdrop-saturate-100
backdrop-saturate-150
backdrop-saturate-200
Backdrop Sepia
backdrop-sepia-0
backdrop-sepia
Backdrop Hue Rotate
backdrop-hue-rotate-0
backdrop-hue-rotate-15
backdrop-hue-rotate-30
backdrop-hue-rotate-60
backdrop-hue-rotate-90
backdrop-hue-rotate-180
Backdrop Invert
backdrop-invert-0
backdrop-invert
Backdrop Opacity
backdrop-opacity-0
backdrop-opacity-50
backdrop-opacity-100
Mix Blend Mode
Control how an element blends with its background.
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosityBackground Blend Mode
Control how an element's background layers blend with each other.
normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosityCombining Filters
You can combine multiple filter utilities to create complex effects.
Vintage Photo
<img class="sepia contrast-125 brightness-90" />
Blur on Hover
<img class="blur-sm hover:blur-none
transition-all" />Glassmorphism Card
<div class="backdrop-blur-md
bg-white/30 border
border-white/20" />Vibrant Image
<img class="saturate-150 contrast-110
brightness-105" />Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
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
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