玻璃拟态和新拟态有什么区别？

玻璃拟态用 backdrop-filter 模糊背后内容并叠半透明色调；新拟态让表面与页面同色，靠右下深影和左上浅影做出浮起或按下感。

为什么会自动加上 -webkit-backdrop-filter？

Safari 18 以下仍需此前缀，Firefox 103 起已免前缀。片段会同时输出标准属性和 -webkit- 前缀。

颗粒噪点是怎么加上去的？

用 SVG feTurbulence fractalNoise 的 data-URI 挂在 ::before 上，不透明度约 0.05–0.15，增加磨砂质感。

Tailwind 映射要注意什么？

会映射 backdrop-blur、backdrop-saturate、rounded 等类。v4 把 blur-sm 从 4px 改为 8px，精确值请用 backdrop-blur-[12px] 这类任意值。

新拟态适合用在可点击按钮上吗？

不建议用于主要可交互控件。其阴影不计入对比度；深色模式浅影不透明度宜降至 0.03–0.1。

Elysia Tools

导航

Design

玻璃拟态 / 新拟态 CSS 片段生成器

端到端生成磨砂玻璃（glassmorphism）或新拟态（neumorphism）的完整 CSS 片段：调节模糊、饱和度、色调不透明度、圆角、边框、外阴影与顶部高光；可选 SVG feTurbulence 颗粒噪点叠加与 @supports 不支持降级；自动附带 -webkit-backdrop-filter 前缀（Safari 18 以下必需）与 Tailwind 类映射（含 v3/v4 差异提示），并在渐变背景上实时预览成品卡片。

详情

这个工具可以帮你完成什么

常量来源（2026-08 核实）：css.glass 经典默认（rgba(255,255,255,.2)、blur(5px)、16px 圆角、0 4px 30px 阴影）；2025 最佳实践组合（blur(12px) saturate(160%)、外阴影 0 8px 32px rgba(0,0,0,.12) + inset 顶部高光）。backdrop-filter 全球支持 95.69%（caniuse），Safari 需 -webkit- 前缀至 17.x、18 起免前缀，Firefox 103 起免前缀。噪点用 SVG feTurbulence fractalNoise data-URI 挂 ::before（opacity 0.05–0.15）；@supports 检测缺失时退回近实心 rgba 背景。Tailwind 映射 backdrop-blur-xl=24px、backdrop-saturate-150、rounded-2xl=16px；注意 v4 把 blur-sm 从 4px 改为 8px，精确值请用 backdrop-blur-[12px]。新拟态配方（neumorphism.io）：背景与页面同色、右下深影+左上浅影、inset 为按下态、深色模式浅影不透明度降至 0.03–0.1；其阴影不计入对比度，不宜用于可交互控件。

执行

运行这个工具

填写表单、运行工具，并在同一页面查看结果。

预设示例运行

点击示例可自动填充表单；文件类型仍需手动上传。

2 个示例

最佳实践磨砂玻璃卡（blur 12 / saturate 160）

2025 最佳实践组合：blur(12px) saturate(160%)、0.15 白色调、16px 圆角、0.25 边框、带顶部高光的分层阴影、颗粒叠加与 @supports 降级，附 Tailwind 映射与 v4 版本提示。

<section class="glz">live frosted card over gradient · CSS with -webkit- prefix, ::before grain, @supports fallback · Tailwind classes</section>

深色新拟态控件的按下（inset）状态

深色模式新拟态表面（#2d2d2d）配 inset 阴影表现按下态，浅影降至 0.06 让表面呈现受光感——Tailwind 输出使用任意值阴影。

<section class="glz">neumorphism · dark #2d2d2d · inset 8px shadows · preview on flat dark panel · CSS + arbitrary-value Tailwind</section>

输入参数

参数已分组展示，长表单更容易浏览和调整。

16 个选项

参数设置调整格式、范围、数值和模式。11

风格select可选背景模糊（px）number可选背景饱和度（%）number可选玻璃色调颜色color可选玻璃色调不透明度number可选圆角（px）number可选边框宽度（px，仅玻璃）number可选边框不透明度（仅玻璃）number可选外阴影不透明度（仅玻璃）number可选新拟态背景色color可选新拟态阴影距离（px）number可选

开关选项启用或关闭可选行为。5

顶部高光（inset）checkbox可选勾选后启用颗粒噪点叠加checkbox可选勾选后启用@supports 降级checkbox可选勾选后启用新拟态按下（inset）状态checkbox可选勾选后启用新拟态深色模式checkbox可选勾选后启用

结果

等待运行

运行工具后，这里会展示文件、文本、结构化数据或流式返回结果。

案例

与这个工具匹配的案例

继续查看相关工具与专题

{ "style": "glass", "blurPx": 12, "saturatePct": 160, "tintColor": "#ffffff", "tintAlpha": 0.15, "radiusPx": 16, "borderWidth": 1, "borderAlpha": 0.25, "shadowAlpha": 0.12, "topHighlight": true, "noiseOverlay": true, "includeFallback": true }

玻璃拟态 / 新拟态 CSS 片段生成器

这个工具可以帮你完成什么

运行这个工具

预设示例运行

输入参数

结果

与这个工具匹配的案例

继续查看相关工具与专题

预设示例运行

输入参数

结果

详细了解工具的适用范围、支持能力及用户案例。

关键事实

概览

适用场景

使用方式

常见用途

示例

1. 最佳实践磨砂玻璃卡

2. 深色新拟态按下态

常见问题

SVG示例

Tailwind CSS 示例

Web Python 图像处理示例

Bulma CSS 框架示例

音频旋律轮廓提取器

字体文件检视器（TTF / OTF / WOFF / WOFF2）

图片角落水印工具

图片对角水印工具

SVG、Favicon 与图标资产工作流工具

音频编码与格式转换工具

图片格式转换与动画导出工具

JSON 交换与格式翻译工具

3. 浅色新拟态浮起面板