设计玻璃拟态和新拟态 CSS 效果，并实时预览。
最后更新
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
玻璃拟态（glassmorphism）和新拟态（neumorphism）是现代网页设计中随处可见的两种表面风格。**玻璃**是毛玻璃效果：一张半透明卡片，会把身后的内容模糊掉，通常叠在色彩丰富的渐变或照片背景上。**新拟态**是柔软塑料般的效果：卡片看起来像是从表面凸出（或凹陷）进去，由一对与背景同色调的明暗阴影照亮。
这两种效果都是纯 CSS：不用图片、不用 JavaScript、不用任何库。玻璃效果依靠 backdrop-filter: blur()，加上半透明填充和一条细边框。新拟态由一对 box-shadow 声明构成：一个比表面稍暗，一个比表面稍亮，朝相反方向偏移。计算很简单，但手动调整数值直到一切恰到好处却要花不少时间。生成器帮你省掉这一步。
这个工具为每个关键参数都提供了滑块，预览面板放在可配置的背景上（这样玻璃效果才真正有东西可以折射），还能一键复制生成的 CSS。一切都在你的浏览器中运行，把代码片段直接粘贴进你的样式表即可。
backdrop-filter 是实现玻璃拟态的属性：它模糊并增强的是元素身后的内容，而不是元素本身。rgba(...)）和一条浅色细边框，才像真正的磨砂材质；去掉其中任何一个，效果就会垮掉。box-shadow 声明，而不是一个：右下方一个较暗的阴影，左上方一个较亮的高光，两者都使用表面的色调，而不是纯黑或纯白。inset 关键字：数值相同，视觉方向相反（向内按下，而不是向外凸起）。在顶部切换**玻璃**和**新拟态**。玻璃需要背景，新拟态则放在你可以控制的纯色表面上。
对于玻璃，主要的调节项是模糊（背景被涂抹的程度）、背景不透明度（卡片的透明程度）和色调（淡淡的偏色）。对于新拟态，主要的调节项是距离（阴影偏移多远）、模糊（阴影有多柔和）和强度（明暗两个阴影与表面的差别有多大）。
玻璃在鲜艳的渐变或照片上效果最好。新拟态在柔和、略偏离纯色的颜色上效果最好（#e0e5ec 是经典的“新拟态灰”）。工具自带一排可点击的预设。
新拟态有三种风格：**凸起**（向外挤出）、**平面**（阴影相同，没有渐变填充）和**内凹**（向内按下）。三种都试试，它们的阴影计算相同，只是方向不同。
点击**复制**，把代码片段放进你的样式表。输出可以直接用于生产：包含为旧版 Safari 准备的带前缀的 -webkit-backdrop-filter，属性排列有序，还有配套的 border-radius，作为单个 class 就能使用。
每种效果真正依赖的属性。完整参考见 MDN 的 backdrop-filter 和 box-shadow 页面。
| 风格 | 关键属性 | 调节什么 | 说明 |
|---|---|---|---|
| 玻璃 | backdrop-filter、半透明 background、细 border | 模糊、饱和度、alpha | 始终设置 -webkit-backdrop-filter，以兼容 Safari |
| 新拟态（凸起） | 两个 box-shadow 声明加线性渐变填充 | 距离、模糊、明暗强度 | 阴影颜色应与表面色调一致，而不是纯黑或纯白 |
| 新拟态（内凹） | 两个 inset box-shadow 声明 | 与凸起相同的控件 | 内凹看起来像按下的按钮或凹陷的输入框 |
| 组合 / 混合 | 新拟态底板上叠加玻璃 | 叠加要谨慎，滤镜太多会拖垮性能 | 在仪表盘中很常见：新拟态卡片配玻璃效果的悬浮页头 |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);经典的玻璃拟态。saturate(180%) 给模糊后的背景增添一丝鲜艳的色彩，没有它，毛玻璃会显得发白。把它放在首屏渐变或照片上。
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;主要靠两个阴影：右下方一个较暗，左上方一个较亮的高光。渐变填充增加了一层微妙的光泽，让人眼觉得它是“塑料”。
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;给两个阴影都加上 inset，卡片看起来就是凹进去的而不是凸出来的，非常适合输入框和开关背景。
-webkit-backdrop-filter。旧版 Safari（以及任何内嵌的 WebView）在没有前缀时会忽略 backdrop-filter，你的玻璃就变成了一块实心方块。backdrop-filter 图层。每一层都是 GPU 上的实时模糊运算，同一屏上有三四个，你的仪表盘就会开始掉帧。玻璃拟态是毛玻璃效果：半透明卡片，透出模糊的背景。新拟态是柔软塑料般的效果：一张不透明卡片，利用一对明暗阴影，看起来像是从表面凸出（或凹陷）进去。两者解决的视觉问题不同，很少同时出现。
backdrop-filter 属性，你还需要加上 -webkit-backdrop-filter 前缀。这个生成器会自动输出两者。没有前缀时，旧版 Safari 和 iOS WebView 会退回到底层的 background 颜色，玻璃效果就消失了。出了名地难。普通的新拟态很难做到无障碍，因为卡片和表面之间的对比度本来就刻意设计得很低。如果使用它，请搭配强烈的文字对比度（≥ 4.5:1）、清晰可见的焦点框，并给只有图标的按钮加上 ARIA 标签；同时避免在必须醒目的元素上使用新拟态（错误提示、主要行动按钮）。
两个常见原因：背景没有颜色（白底上的玻璃等于没有东西可模糊），或者模糊半径太小（低于约 8px 时，身后的颜色几乎没有变化）。在卡片后面加一个渐变或图片，并把模糊调到 12 至 20px。
backdrop-filter，box-shadow 更是普遍支持。只是要注意性能：backdrop-filter 是每帧都要执行的 GPU 运算，所以同一屏上的玻璃图层数量要少。