Tailwind CSS 24 🎨 Opacity, Blend Modes, and Backdrop Filters (Blur, Brightness, Contrast)
Transparency is not one property. It is several. An element can be semi-transparent on its own, blend with whatever sits behind it, or filter the backdrop visible through it. Tailwind exposes each of these as distinct utility families: opacity-* for the element’s own transparency, mix-blend-* and bg-blend-* for how colors combine, and backdrop-* for filters applied to the area behind a semi-transparent element. They look similar in a screenshot but behave differently under the hood, and choosing the wrong one produces either the wrong visual effect or a performance penalty.
This chapter covers all three mechanisms. You will learn the opacity-* scale and the slash opacity modifier, the difference between mix-blend-mode and background-blend-mode, and the full set of backdrop filter utilities including blur, brightness, and contrast. You will also see how these utilities compose with one another and how to use them for the visual effects that define modern glassmorphism interfaces.
Key point: opacity affects the entire element, including its children. mix-blend-mode affects how the element’s colors combine with the backdrop. backdrop-filter affects what is visible through a semi-transparent element. They are three separate CSS properties, and Tailwind provides utilities for each.
Why opacity, blend modes, and backdrop filters exist
The transparency problem. A fully opaque element hides everything behind it. Sometimes that is correct; often it is not. A modal overlay should dim the page behind it. A card on a busy background should remain readable. A dropdown menu should feel layered above the content without completely obscuring it. The opacity-* utilities control the element’s own transparency, making it blend visually with whatever is behind it.
The color combination problem. Transparency alone is a blunt instrument. It makes everything fade uniformly. Blend modes offer finer control: multiplying colors to darken, screening to lighten, overlaying to increase contrast. The mix-blend-* utilities control how an element’s content blends with its backdrop, and bg-blend-* controls how a background image blends with a background color on the same element.
The backdrop problem. A semi-transparent element lets the background show through, but sometimes you want to modify that background. A frosted-glass effect blurs the content behind a panel. A darkened overlay increases contrast for text. The backdrop-* filter utilities apply CSS filters to the area behind an element, creating effects that are impossible with opacity alone.
The glassmorphism problem. The modern “frosted glass” aesthetic combines three techniques: a semi-transparent background, a backdrop blur, and a subtle border or shadow. Tailwind’s backdrop filter utilities make this effect straightforward: bg-white/20 backdrop-blur-lg border border-white/30. Without backdrop filters, the same effect would require layering tricks or pre-rendered images.
The version problem. Opacity utilities have been stable across Tailwind versions, but the color opacity syntax changed. Tailwind v4 removed the deprecated bg-opacity-* and text-opacity-* utilities in favor of the slash modifier: bg-blue-500/50 instead of bg-blue-500 bg-opacity-50 . Blend modes were introduced in v2.1 , and backdrop filters followed shortly after.
a. Opacity: element transparency
The opacity-* utilities set the CSS opacity property on an element. The scale runs from 0 to 100 in steps that vary by version. Tailwind v4 provides more granular steps than v2, including values like opacity-15, opacity-35, and opacity-45 .
<div class="opacity-0">Invisible</div>
<div class="opacity-25">Quarter visible</div>
<div class="opacity-50">Half visible</div>
<div class="opacity-75">Mostly visible</div>
<div class="opacity-100">Fully opaque</div>A critical behavior: opacity affects the entire element and all its children. An element with opacity-50 makes its text, borders, and child elements half-transparent as a group. This is different from using a semi-transparent background color, which only affects the background.
<!-- Element and all children are 50% transparent -->
<div class="opacity-50 bg-white p-4">
<p>This text is also half-transparent</p>
</div>
<!-- Only the background is semi-transparent -->
<div class="bg-white/50 p-4">
<p>This text is fully opaque</p>
</div>The slash opacity modifier is the modern way to apply transparency to a specific color. bg-white/50 sets a white background with 50% opacity. This works with any color utility: text-black/75, border-blue-500/30, ring-purple-500/40 . The slash syntax is preferred over the deprecated bg-opacity-* utilities because it requires only one class and works with any color.
<div class="bg-blue-500/50">Blue background at 50%</div>
<div class="text-black/75">Black text at 75%</div>Arbitrary opacity values are supported with square brackets: opacity-[.67] or bg-blue-500/[.67]. For CSS variables, the shorthand opacity-(--my-opacity) expands to opacity: var(--my-opacity) .
Opacity responds to variants like any other utility: hover:opacity-100, disabled:opacity-50, md:opacity-75 .
b. Blend modes: mix and background
Blend modes control how an element’s colors combine with what is behind it. Tailwind provides two families: mix-blend-* for an element’s content blending with the backdrop, and bg-blend-* for a background image blending with the background color on the same element .
The available modes are the same for both families: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Tailwind v4 also includes plus-darker and plus-lighter for additive blending .
Mix blend mode applies to the element itself. The element’s rendered content, including text and background, blends with the content behind it.
<div class="bg-green-300">
<div class="mix-blend-multiply bg-amber-300">Blended</div>
</div>The mix-blend-multiply class makes the amber element multiply with the green behind it, producing a darker combined color. This is useful for duotone effects, image overlays, and text that should interact with its background .
Background blend mode applies only to the element’s own background layers. It controls how a background image blends with a background color on the same element.
<div class="bg-blue-500 bg-[url('/img/mountains.jpg')] bg-blend-overlay">
Background image with color overlay
</div>The bg-blend-overlay class makes the background image overlay the blue background color, producing a tinted image effect without needing a separate overlay element .
A critical concept: blending only occurs within the same stacking context. If you want an element to blend with its parent’s background but not with content further behind, apply the isolate utility to the parent. This creates a new stacking context that contains the blend .
c. Backdrop filters: blur, brightness, contrast
Backdrop filters apply CSS filter functions to the area behind an element. The element itself must be at least partially transparent for the filtered backdrop to be visible. Tailwind provides several backdrop filter families.
Backdrop blur is the most commonly used. The scale runs from backdrop-blur-sm (4px) to backdrop-blur-3xl (64px), with backdrop-blur (8px) as the default .
<div class="bg-white/30 backdrop-blur-md p-4">
Frosted glass panel
</div>Backdrop brightness multiplies the backdrop’s brightness. Values below 100 darken, values above 100 lighten. The scale includes backdrop-brightness-0 through backdrop-brightness-200 .
<div class="bg-black/30 backdrop-brightness-50">
Darkened backdrop
</div>Backdrop contrast adjusts the backdrop’s contrast. Values below 100 reduce contrast, values above 100 increase it. The scale includes backdrop-contrast-0 through backdrop-contrast-200 .
<div class="bg-white/20 backdrop-contrast-125">
Higher contrast backdrop
</div>Multiple backdrop filters can be combined on the same element. They stack in the order they are applied:
<div class="backdrop-blur-md backdrop-brightness-75 backdrop-contrast-125">
Combined backdrop filters
</div>To remove all backdrop filters at once, use backdrop-filter-none. This is useful for responsive or state-based removal .
<div class="backdrop-blur-md md:backdrop-filter-none">
Blurred on mobile, sharp on desktop
</div>Custom values are supported with arbitrary syntax: backdrop-blur-[2px], backdrop-brightness-[1.75]. CSS variable shorthand works too: backdrop-brightness-(--my-brightness) .
A practical note: backdrop filters are relatively expensive to render because the browser must sample and process the pixels behind the element. Applying them to many large elements can cause jank on lower-end devices. Use them deliberately rather than as a default.
Complete Example Session
<!-- ============================================ -->
<!-- PART 1: BASIC OPACITY SCALE -->
<!-- ============================================ -->
<div class="opacity-100 bg-blue-500 p-4">100%</div>
<div class="opacity-75 bg-blue-500 p-4">75%</div>
<div class="opacity-50 bg-blue-500 p-4">50%</div>
<div class="opacity-25 bg-blue-500 p-4">25%</div>
<div class="opacity-0 bg-blue-500 p-4">0%</div><!-- ============================================ -->
<!-- PART 2: SLASH OPACITY MODIFIER -->
<!-- ============================================ -->
<div class="bg-white/50 p-4">Background 50% opaque</div>
<div class="bg-black/75 text-white p-4">Background 75% opaque</div>
<div class="border-2 border-blue-500/30 p-4">Border 30% opaque</div><!-- ============================================ -->
<!-- PART 3: OPACITY VS SLASH MODIFIER -->
<!-- ============================================ -->
<div class="opacity-50 bg-white p-4">
<p>Text is also 50% transparent</p>
</div>
<div class="bg-white/50 p-4">
<p>Text is fully opaque</p>
</div><!-- ============================================ -->
<!-- PART 4: MIX BLEND MODE -->
<!-- ============================================ -->
<div class="bg-green-300 p-8">
<div class="mix-blend-multiply bg-amber-300 p-4">
Multiply blend
</div>
</div>
<div class="bg-gray-800 p-8">
<div class="mix-blend-screen bg-blue-500 p-4 text-white">
Screen blend
</div>
</div><!-- ============================================ -->
<!-- PART 5: BACKGROUND BLEND MODE -->
<!-- ============================================ -->
<div class="bg-blue-500 bg-[url('/img/pattern.svg')] bg-blend-overlay p-8">
Background image blended with color
</div><!-- ============================================ -->
<!-- PART 6: BACKDROP BLUR -->
<!-- ============================================ -->
<div class="bg-white/30 backdrop-blur-sm p-4">Small blur</div>
<div class="bg-white/30 backdrop-blur-md p-4">Medium blur</div>
<div class="bg-white/30 backdrop-blur-xl p-4">Extra large blur</div><!-- ============================================ -->
<!-- PART 7: BACKDROP BRIGHTNESS -->
<!-- ============================================ -->
<div class="bg-black/30 backdrop-brightness-50 p-4">
Darkened backdrop
</div>
<div class="bg-white/30 backdrop-brightness-150 p-4">
Brightened backdrop
</div><!-- ============================================ -->
<!-- PART 8: BACKDROP CONTRAST -->
<!-- ============================================ -->
<div class="bg-white/20 backdrop-contrast-125 p-4">
Higher contrast
</div>
<div class="bg-white/20 backdrop-contrast-75 p-4">
Lower contrast
</div><!-- ============================================ -->
<!-- PART 9: COMBINED BACKDROP FILTERS -->
<!-- ============================================ -->
<div class="bg-white/20 backdrop-blur-md backdrop-brightness-75 backdrop-contrast-125 p-8">
Blur + brightness + contrast
</div><!-- ============================================ -->
<!-- PART 10: GLASSMORPHISM PATTERN -->
<!-- ============================================ -->
<div class="relative min-h-64 bg-gradient-to-br from-purple-500 to-pink-500">
<div class="absolute inset-8 bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-8 text-white shadow-xl">
<h2 class="text-2xl font-bold">Frosted Glass</h2>
<p class="mt-2">Backdrop blur + semi-transparent background + border</p>
</div>
</div>The ten parts covered opacity scale, slash opacity modifier, the difference between element opacity and background opacity, mix blend modes, background blend modes, backdrop blur, backdrop brightness, backdrop contrast, combined backdrop filters, and the glassmorphism pattern.
Quick Reference
Opacity Scale
| Class | CSS |
|---|---|
opacity-0 | opacity: 0 |
opacity-25 | opacity: 0.25 |
opacity-50 | opacity: 0.5 |
opacity-75 | opacity: 0.75 |
opacity-100 | opacity: 1 |
opacity-[.67] | opacity: 0.67 |
Slash Opacity Modifier
| Class | Effect |
|---|---|
bg-blue-500/50 | 50% opaque background |
text-black/75 | 75% opaque text |
border-white/30 | 30% opaque border |
bg-(--brand)/50 | CSS variable with opacity |
Blend Mode Families
| Family | Prefix | Applies To |
|---|---|---|
| Mix blend | mix-blend-* | Element content vs backdrop |
| Background blend | bg-blend-* | Background image vs background color |
Common Blend Modes
| Class | Effect |
|---|---|
mix-blend-multiply | Darkens |
mix-blend-screen | Lightens |
mix-blend-overlay | Increases contrast |
mix-blend-difference | Inverts |
mix-blend-luminosity | Preserves luminosity |
Backdrop Filter Utilities
| Family | Prefix | Range |
|---|---|---|
| Blur | backdrop-blur-* | sm to 3xl |
| Brightness | backdrop-brightness-* | 0 to 200 |
| Contrast | backdrop-contrast-* | 0 to 200 |
| Remove all | backdrop-filter-none | — |
Best Practices
✅ Do This:
<!-- Use slash opacity for color-specific transparency -->
<div class="bg-white/50 text-black/75"> <!-- ✅ -->
<!-- Use opacity for group transparency -->
<div class="opacity-50 hover:opacity-100 transition-opacity"> <!-- ✅ -->
<!-- Use backdrop-blur for glassmorphism -->
<div class="bg-white/20 backdrop-blur-lg"> <!-- ✅ -->
<!-- Combine backdrop filters for complex effects -->
<div class="backdrop-blur-md backdrop-brightness-75"> <!-- ✅ -->
<!-- Use isolate to contain blend modes -->
<div class="isolate">
<div class="mix-blend-multiply bg-amber-300"> <!-- ✅ -->
</div>
<!-- Remove backdrop filters responsively -->
<div class="backdrop-blur-md md:backdrop-filter-none"> <!-- ✅ -->❌ Don’t Do This:
<!-- Don't use opacity when only background should be transparent -->
<div class="opacity-50 bg-white"> <!-- ❌ -->
<!-- Use bg-white/50 instead -->
<!-- Don't use deprecated bg-opacity-* in v4 -->
<div class="bg-blue-500 bg-opacity-50"> <!-- ❌ -->
<!-- Use bg-blue-500/50 instead -->
<!-- Don't forget the element must be transparent for backdrop filters -->
<div class="bg-white backdrop-blur-lg"> <!-- ❌ nothing visible -->
<!-- Don't stack too many backdrop filters on large elements -->
<div class="backdrop-blur-3xl backdrop-brightness-200 ..."> <!-- ⚠️ expensive -->
<!-- Don't use mix-blend without understanding stacking context -->
<div class="mix-blend-multiply"> <!-- ⚠️ may blend unexpectedly -->Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
| Children also transparent | opacity affects entire element | Use bg-color/opacity instead |
| Nothing visible behind backdrop filter | Element is fully opaque | Add bg-white/20 or similar |
| Blend mode affects wrong elements | No stacking context isolation | Add isolate to parent |
Deprecated bg-opacity-* ignored | Removed in v4 | Use slash modifier |
| Backdrop filter expensive | Large elements with many filters | Reduce filter count or size |
| Backdrop filter not supported | Browser compatibility | Provide fallback background |
| Text unreadable over blur | Insufficient contrast | Add overlay or increase opacity |
Real-World Examples
1. Modal Overlay
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm"></div>2. Frosted Glass Card
<div class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-6">3. Image with Color Overlay
<div class="bg-blue-500 bg-[url('/img/photo.jpg')] bg-blend-multiply">4. Disabled Button
<button class="opacity-50 cursor-not-allowed" disabled>Submit</button>5. Hover Fade
<div class="opacity-75 hover:opacity-100 transition-opacity">6. Navigation Bar Glass
<nav class="sticky top-0 bg-white/80 backdrop-blur-md">7. Duotone Effect
<div class="mix-blend-multiply bg-purple-500">
<img src="photo.jpg" />
</div>8. Darkened Backdrop
<div class="backdrop-brightness-50 bg-black/30">9. High Contrast Overlay
<div class="bg-white/10 backdrop-contrast-150">10. Semi-Transparent Border
<div class="border-2 border-white/40 rounded-lg">Visual
Opacity vs Slash Modifier
┌─────────────────────────────────────────────────────────────┐
│ OPACITY (Affects Element + Children) │
│ │
│ opacity-50 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │
│ │▓ Background: 50% opaque ▓│ │
│ │▓ Text: 50% opaque ▓│ │
│ │▓ Border: 50% opaque ▓│ │
│ └─────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ BG-WHITE/50 (Affects Only Background) │
│ │
│ bg-white/50 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ │ Background: 50% opaque │ │
│ │ Text: 100% opaque │ │
│ │ Border: 100% opaque │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘Blend Mode Stacking Context
┌─────────────────────────────────────────────────────────────┐
│ WITHOUT ISOLATE │
│ │
│ Parent (bg-green-300) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Child (mix-blend-multiply bg-amber-300) │ │
│ │ Blends with parent AND everything behind parent │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ WITH ISOLATE │
│ │
│ Parent (bg-green-300 isolate) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Child (mix-blend-multiply bg-amber-300) │ │
│ │ Blends only with parent, not content behind │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ isolate creates a new stacking context. │
│ │
└─────────────────────────────────────────────────────────────┘Backdrop Filter Effect
┌─────────────────────────────────────────────────────────────┐
│ WITHOUT BACKDROP FILTER │
│ │
│ Background (colorful image) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Semi-transparent panel (bg-white/20) │ │
│ │ Background shows through, unmodified │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ WITH BACKDROP FILTER │
│ │
│ Background (colorful image) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Semi-transparent panel (bg-white/20) │ │
│ │ + backdrop-blur-md │ │
│ │ Background is blurred before showing through │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ The filter applies to the backdrop, not the element. │
│ │
└─────────────────────────────────────────────────────────────┘Glassmorphism Recipe
┌─────────────────────────────────────────────────────────────┐
│ GLASSMORPHISM COMPONENTS │
│ │
│ 1. Semi-transparent background │
│ bg-white/20 │
│ │
│ 2. Backdrop blur │
│ backdrop-blur-lg │
│ │
│ 3. Subtle border │
│ border border-white/30 │
│ │
│ 4. Rounded corners │
│ rounded-xl │
│ │
│ 5. Optional shadow │
│ shadow-xl │
│ │
│ Combined: bg-white/20 backdrop-blur-lg border │
│ border-white/30 rounded-xl shadow-xl │
│ │
└─────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
| Element opacity | opacity-{0-100} |
| Color opacity | {utility}-{color}/{opacity} |
| Mix blend | mix-blend-{mode} |
| Background blend | bg-blend-{mode} |
| Stacking isolation | isolate |
| Backdrop blur | backdrop-blur-{size} |
| Backdrop brightness | backdrop-brightness-{value} |
| Backdrop contrast | backdrop-contrast-{value} |
| Remove backdrop filters | backdrop-filter-none |
| Arbitrary values | opacity-[.67], backdrop-blur-[2px] |
Key takeaways:
opacityaffects the entire element, including children. A semi-transparent background color (bg-white/50) only affects the background. Choose based on whether child elements should also be transparent.- The slash modifier is the modern color opacity syntax.
bg-blue-500/50replaces the deprecatedbg-blue-500 bg-opacity-50. It works with any color utility and CSS variables . mix-blend-modeandbackground-blend-modeare different properties. Mix blend controls how an element’s content blends with the backdrop. Background blend controls how an element’s background image blends with its background color .- Blend modes only work within a stacking context. Use
isolateon a parent element to prevent blending with content further behind . - Backdrop filters require a transparent element. A fully opaque element hides the filtered backdrop. Use
bg-white/20or similar to let the filter show through. - Backdrop blur, brightness, and contrast can be combined. Multiple backdrop filter utilities stack on the same element, applying each filter in sequence .
- Backdrop filters are expensive to render. The browser must sample and process pixels behind the element. Use them deliberately, especially on large or numerous elements.
backdrop-filter-noneremoves all backdrop filters. Useful for responsive design or state-based toggling .
Remember: Opacity, blend modes, and backdrop filters are three separate tools for three separate problems. Opacity controls the element’s own transparency. Blend modes control how colors combine. Backdrop filters control what is visible through a semi-transparent element. The slash opacity modifier is the modern syntax for color-specific transparency, replacing the deprecated bg-opacity-* utilities. The glassmorphism aesthetic—frosted glass, subtle borders, soft shadows—is built from these utilities combined deliberately. Use them with awareness of their cost: opacity and blend modes are cheap, but backdrop filters sample the backdrop and can cause performance issues if overused. Choose the simplest tool that achieves the effect, and reserve backdrop filters for the moments where they genuinely add depth.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!