/tailwindcss-effects

name: tailwindcss-effects
description: "Use when adding box/inset shadows, controlling opacity, applying CSS filters or backdrop filters (glassmorphism), or mask-* utilities."
user-invocable: false

<objective> Complete reference for Tailwind CSS v4.1 visual-effects utilities: box shadows (`shadow-*`, custom shadow colors, the new `inset-shadow-*`), `opacity-*`, CSS filters (blur/brightness/contrast/grayscale/sepia/hue-rotate/invert/saturate), backdrop filters (`backdrop-blur-*`, `backdrop-brightness-*`, etc. — for glassmorphism/frosted-glass effects), and the new `mask-*` utilities (image, position, size, repeat).

Includes combined-effect patterns (blur+brightness, backdrop blur+brightness for frosted glass), responsive/dark-mode variants, custom `@theme`/`@utility` extension, and browser-support notes per effect category. </objective>

Tailwind CSS v4.1 Effects

Effects utilities to add shadows, filters, masks and visual effects to elements.

Box Shadow

Shadows Standard

<!-- Preset shadows -->
<div class="shadow-none">No shadow</div>
<div class="shadow-xs">Extra small shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Base shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">2XL shadow</div>

Shadow Color (v4.1 NEW)

<!-- Custom shadow colors -->
<div class="shadow-sm shadow-red-500">Red tinted shadow</div>
<div class="shadow shadow-blue-400">Blue tinted shadow</div>
<div class="shadow-lg shadow-purple-500/50">Purple shadow with opacity</div>

Inset Shadow (v4.1 NEW)

<!-- Inner shadows -->
<div class="inset-shadow-sm">Inset small shadow</div>
<div class="inset-shadow">Inset base shadow</div>
<div class="inset-shadow-lg">Inset large shadow</div>
<div class="inset-shadow-lg inset-shadow-blue-500">Inset shadow with color</div>

Arbitrary Shadow Values

<div class="shadow-[0_4px_12px_rgba(0,0,0,0.3)]">Custom shadow</div>
<div class="shadow-[inset_0_1px_3px_0_rgba(0,0,0,0.1)]">Custom inset</div>

Opacity

Opacity Utilities

<!-- Opacity scale 0-100% -->
<div class="opacity-0">Fully transparent</div>
<div class="opacity-25">25% opacity</div>
<div class="opacity-50">50% opacity</div>
<div class="opacity-75">75% opacity</div>
<div class="opacity-100">Fully opaque</div>

Opacity with Colors

<!-- Shorthand opacity in color values -->
<div class="bg-red-500/50">Red with 50% opacity</div>
<div class="text-blue-600/75">Text with 75% opacity</div>
<div class="border-gray-400/25">Border with 25% opacity</div>
<div class="shadow-lg shadow-black/30">Shadow with 30% opacity</div>

Filters

Blur

<div class="blur-none">No blur</div>
<div class="blur-sm">Small blur (4px)</div>
<div class="blur">Base blur (12px)</div>
<div class="blur-md">Medium blur (16px)</div>
<div class="blur-lg">Large blur (24px)</div>
<div class="blur-xl">Extra large blur (40px)</div>
<div class="blur-2xl">2XL blur (64px)</div>

<!-- Arbitrary -->
<div class="blur-[8px]">Custom blur 8px</div>

Brightness

<div class="brightness-50">Darken to 50%</div>
<div class="brightness-75">Darken to 75%</div>
<div class="brightness-100">Normal (100%)</div>
<div class="brightness-125">Brighten to 125%</div>
<div class="brightness-150">Brighten to 150%</div>
<div class="brightness-200">Brighten to 200%</div>

Contrast

<div class="contrast-50">Reduce contrast 50%</div>
<div class="contrast-75">Reduce contrast 75%</div>
<div class="contrast-100">Normal contrast (100%)</div>
<div class="contrast-125">Increase contrast 125%</div>
<div class="contrast-150">Increase contrast 150%</div>
<div class="contrast-200">Increase contrast 200%</div>

Grayscale

<div class="grayscale-0">No grayscale</div>
<div class="grayscale">Full grayscale (100%)</div>

<!-- Arbitrary -->
<div class="grayscale-[50%]">50% grayscale</div>

Sepia

<div class="sepia-0">No sepia</div>
<div class="sepia">Full sepia (100%)</div>

<!-- Arbitrary -->
<div class="sepia-[75%]">75% sepia</div>

Hue Rotate

<div class="hue-rotate-0">No rotation</div>
<div class="hue-rotate-15">15 degree rotation</div>
<div class="hue-rotate-30">30 degree rotation</div>
<div class="hue-rotate-60">60 degree rotation</div>
<div class="hue-rotate-90">90 degree rotation</div>
<div class="hue-rotate-180">180 degree rotation</div>

<!-- Arbitrary -->
<div class="hue-rotate-[120deg]">Custom rotation</div>

Invert

<div class="invert-0">No invert</div>
<div class="invert">Full invert (100%)</div>

<!-- Arbitrary -->
<div class="invert-[50%]">50% invert</div>

Saturate

<div class="saturate-50">Desaturate to 50%</div>
<div class="saturate-100">Normal saturation (100%)</div>
<div class="saturate-150">Increase saturation 150%</div>
<div class="saturate-200">Increase saturation 200%</div>

Backdrop Filters

Applies filters to the backdrop (element behind).

Backdrop Blur

<div class="backdrop-blur-none">No blur</div>
<div class="backdrop-blur-sm">Small blur (4px)</div>
<div class="backdrop-blur">Base blur (12px)</div>
<div class="backdrop-blur-md">Medium blur (16px)</div>
<div class="backdrop-blur-lg">Large blur (24px)</div>
<div class="backdrop-blur-xl">Extra large blur (40px)</div>

Backdrop Brightness

<div class="backdrop-brightness-50">Darken backdrop 50%</div>
<div class="backdrop-brightness-75">Darken backdrop 75%</div>
<div class="backdrop-brightness-100">Normal (100%)</div>
<div class="backdrop-brightness-125">Brighten backdrop 125%</div>
<div class="backdrop-brightness-150">Brighten backdrop 150%</div>

Backdrop Contrast

<div class="backdrop-contrast-50">Reduce backdrop contrast 50%</div>
<div class="backdrop-contrast-100">Normal (100%)</div>
<div class="backdrop-contrast-150">Inc