在传统 CSS 中，想要实现毛玻璃效果，我们需要熟练掌握 backdrop-filter 属性，并且要处理各种浏览器兼容性。而在 Tailwind CSS 中，这一切都变得非常直观，只需要几个简单的类名就能快速搞定。
Tailwind CSS 毛玻璃语法
在 Tailwind CSS 中，实现毛玻璃效果的主要思路分为 3 步：① 背景半透明；② 开启背景模糊；③ 添加细微边框。其中，我们需要配合使用以下 3 组类名：
1. 背景半透明
bg-white/30：设置背景为白色，且不透明度为 30%（Tailwind CSS v4 推荐语法）。- 或者使用 bg-opacity-30 配合 bg-white。
2. 开启背景模糊
backdrop-blur-{尺寸}：这是毛玻璃的灵魂。- 常用尺寸包括：backdrop-blur-sm、backdrop-blur-md（默认）、backdrop-blur-lg、backdrop-blur-xl 等。
3. 添加细微边框（可选）
border border-white/20：加上一层极淡的白色边框，可以模拟玻璃边缘的折射感。shadow-xl：增加阴影，让玻璃卡片产生 “悬浮” 在背景之上的层次感。
Tailwind CSS 毛玻璃示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来实现毛玻璃效果。
示例 1：毛玻璃卡片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gradient-to-br from-green-400 via-emerald-500 to-teal-600">
<div class="max-w-sm p-8 bg-white/20 border border-white/30 rounded-3xl backdrop-blur-md shadow-2xl">
<h2 class="text-2xl font-bold text-white">绿叶网</h2>
<p class="mt-4 text-white/90 leading-relaxed">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</p>
<button class="w-full mt-8 py-3 bg-white text-emerald-600 font-bold rounded-xl hover:bg-opacity-90 transition-all cursor-pointer">
开始学习
</button>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，为了最大化展示毛玻璃的魅力，我们将 body 设置为了浓郁的绿色渐变背景。
卡片本身使用了 bg-white/20 配合 backdrop-blur-md，然后我们会发现卡片下方的绿色调被柔和地晕染开来。再加上 border-white/30 的亮色边框，整个 UI 组件仿佛是一片悬浮在绿叶上的半透明薄片。
示例 2：毛玻璃导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-green-50 min-h-[200vh]">
<nav class="fixed top-0 left-0 z-50 flex items-center justify-between w-full px-6 py-4 bg-white/60 border-b border-white/40 backdrop-blur-lg shadow-sm">
<div class="text-xl font-black text-emerald-700">绿叶网</div>
<div class="flex space-x-6 text-emerald-800 font-medium">
<a href="#" class="hover:text-emerald-500 transition-colors">教程</a>
<a href="#" class="hover:text-emerald-500 transition-colors">手册</a>
<a href="#" class="hover:text-emerald-500 transition-colors">课程</a>
</div>
</nav>
<div class="h-40 mt-24 rounded-3xl bg-gradient-to-r from-emerald-400 to-teal-500 mb-10 shadow-lg"></div>
</body>
</html>页面效果如下图所示。
分析：
当我们向下滚动页面，小伙伴们注意观察 “导航” 经过 “绿色背景块” 时出现的毛玻璃效果，如下图所示。
其中，backdrop-blur-lg 能够让页面内容在滑动通过导航栏下方时产生丝滑的视觉过渡。这种设计不仅保证了导航栏文字的可读性，还不会完全遮挡页面的主视觉，广泛应用于大厂官网中。
常见问题
1. 为什么我给元素加上了 backdrop-blur，却没有任何毛玻璃效果呢？
很可能是因为你漏掉了背景半透明。如果背景是纯白色的（如 bg-white），它会完全遮挡下方的图层，导致滤镜无法透过去。因此，我们一定要使用 bg-white/20 这种带有透明度的背景类名才行。
2. 毛玻璃效果对页面性能有影响吗？
backdrop-filter 是一个比较消耗设备 GPU 资源的属性。在普通的网页组件（如弹窗、导航栏、关键卡片）中使用是完全没有问题的。
但在实际开发中，我们应该避免在页面中同时开启几十个复杂的毛玻璃动画，否则在老旧设备上查看页面，可能会出现卡顿掉帧的情况。
