Filters & Effects

Blur, brightness, contrast, grayscale and the rest of the filter chain, plus backdrop filters, blend modes and opacity.

Filters apply graphical effects to an element's rendered pixels. Backdrop filters apply them to whatever is behind the element.

Filter utilities#

<div class="grid grid-cols-3 gap-3 p-4 text-center text-xs sm:grid-cols-6">
  <div><div class="mb-1 h-16 rounded bg-gradient-to-br from-orange-400 to-pink-600"></div>none</div>
  <div><div class="mb-1 h-16 rounded bg-gradient-to-br from-orange-400 to-pink-600 blur-sm"></div>blur-sm</div>
  <div><div class="mb-1 h-16 rounded bg-gradient-to-br from-orange-400 to-pink-600 grayscale"></div>grayscale</div>
  <div><div class="mb-1 h-16 rounded bg-gradient-to-br from-orange-400 to-pink-600 brightness-50"></div>brightness-50</div>
  <div><div class="mb-1 h-16 rounded bg-gradient-to-br from-orange-400 to-pink-600 saturate-200"></div>saturate-200</div>
  <div><div class="mb-1 h-16 rounded bg-gradient-to-br from-orange-400 to-pink-600 hue-rotate-90"></div>hue-rotate-90</div>
</div>

Filters compose#

Multiple filter utilities on one element chain together in the order Tailwind emits them:

<img class="grayscale contrast-125 brightness-95" src="…" alt="">

Backdrop filters#

These affect the area behind a translucent element. The element must have a semi-transparent background for the effect to be visible.

<div class="relative overflow-hidden rounded-xl">
  <div class="h-44 bg-[conic-gradient(at_30%_30%,var(--color-fuchsia-500),var(--color-amber-400),var(--color-sky-500),var(--color-fuchsia-500))]"></div>
  <div class="absolute inset-x-6 top-1/2 -translate-y-1/2 rounded-lg border border-white/30 bg-white/20 p-4 backdrop-blur-md">
    <p class="font-semibold text-white">Frosted glass</p>
    <p class="text-sm text-white/85">bg-white/20 + backdrop-blur-md</p>
  </div>
</div>

Opacity#

<div class="opacity-50">Whole element at 50%</div>
<div class="bg-black/50">Only the background at 50%</div>

Blend modes#

Available modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, plus-darker, plus-lighter.

<div class="relative grid h-40 place-items-center overflow-hidden rounded-xl bg-gradient-to-r from-cyan-400 to-fuchsia-500">
  <h3 class="text-5xl font-black text-white mix-blend-overlay">BLEND</h3>
</div>

mix-blend-multiply is useful for tinting images; mix-blend-luminosity desaturates an element against a colourful backdrop.

Common patterns#

Image that colourises on hover#

<div class="p-4">
  <a href="#" class="group block w-40 overflow-hidden rounded-xl">
    <div class="h-32 bg-gradient-to-br from-teal-400 to-indigo-600 grayscale transition duration-300 group-hover:grayscale-0"></div>
  </a>
</div>

Blurred loading placeholder#

<img class="blur-sm transition duration-500 data-[loaded=true]:blur-none" src="/thumb.jpg" alt="">

Disabled overlay#

<div class="relative">
  <div class="pointer-events-none opacity-40 grayscale">…form…</div>
  <div class="absolute inset-0 grid place-items-center">
    <span class="rounded bg-white px-3 py-1 text-sm shadow">Read only</span>
  </div>
</div>

pointer-events-none is essential — without it, the faded content is still clickable and focusable.

Dark-mode image adjustment#

<img class="dark:brightness-90 dark:contrast-105" src="/photo.jpg" alt="">

Bright photos glare on a dark background; a small brightness reduction reads much better than swapping assets.

Frosted navigation bar#

<header class="sticky top-0 z-40 border-b border-gray-200/70 bg-white/80 backdrop-blur-md dark:border-white/10 dark:bg-gray-900/80">
  …
</header>

Accessibility#

• prefers-reduced-transparency is not yet a Tailwind variant, but heavy blur reduces text contrast. Keep a solid fallback colour under any frosted surface.
• invert and hue-rotate do not make a dark theme. They invert images and break brand colours. Build a real dark palette — see Dark Mode.
• Never convey state with a filter alone. A greyed-out item should also be marked aria-disabled or removed from the tab order.

Common mistakes#

• backdrop-blur with an opaque background. There is nothing to see through; the element needs bg-*/opacity.
• Using v3 blur names. blur-sm is now much lighter.
• opacity-0 to hide interactive content. It stays focusable and announced. Add pointer-events-none or use hidden.
• Animating filter or backdrop-filter. Expensive; prefer opacity or transform.
• Filters on a parent of a fixed child. Any filter creates a containing block, so the child is no longer viewport-fixed — see Position.

Related topics#

• Shadows — drop-shadow in context
• Backgrounds & Gradients — masks and layered backgrounds
• Transitions — what is cheap to animate
• Overflow & Layering — stacking contexts