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

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

> 标准页面: https://elysiatools.com/zh/tools/glassmorphism-css-snippet-builder

- **分类:** Design

- **关键词:** 玻璃拟态, 新拟态, backdrop-filter, 磨砂玻璃, css 生成器, 玻璃卡片

## 概述

常量来源（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；其阴影不计入对比度，不宜用于可交互控件。

## 输入项

- **风格** (select)
- **背景模糊（px）** (number)
- **背景饱和度（%）** (number)
- **玻璃色调颜色** (color)
- **玻璃色调不透明度** (number)
- **圆角（px）** (number)
- **边框宽度（px，仅玻璃）** (number)
- **边框不透明度（仅玻璃）** (number)
- **外阴影不透明度（仅玻璃）** (number)
- **顶部高光（inset）** (checkbox)
- **颗粒噪点叠加** (checkbox)
- **@supports 降级** (checkbox)
- **新拟态背景色** (color)
- **新拟态阴影距离（px）** (number)
- **新拟态按下（inset）状态** (checkbox)
- **新拟态深色模式** (checkbox)

## 适用场景

- 需要为落地页、仪表盘或弹窗制作半透明磨砂玻璃卡片时
- 要做与页面同色背景的新拟态面板、开关或按下态时
- 希望一次拿到带 Safari 前缀、降级方案和 Tailwind 映射的可复制 CSS 时

## 工作原理

- 选择风格：玻璃拟态（磨砂玻璃）或新拟态（Soft UI）。
- 调节背景模糊、饱和度、色调颜色与不透明度、圆角；玻璃风格还可设置边框宽度/不透明度和外阴影不透明度。
- 按需开启顶部 inset 高光、颗粒噪点叠加与 @supports 降级；新拟态可设置背景色、阴影距离、按下态和深色模式。
- 在渐变背景上预览卡片，复制含双前缀的 CSS 片段与 Tailwind 类映射。

## 使用案例

- 落地页上的半透明价格卡或功能介绍卡
- 数据看板上覆盖图表的磨砂信息层
- 深色界面里需要按下反馈的新拟态开关或卡片

## 常见问题

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

玻璃拟态用 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。

## 相关工具

- [音频旋律轮廓提取器](https://elysiatools.com/zh/tools/audio-melody-contour-extractor): 从音频中提取主导旋律，并在一个 ZIP 中导出 MIDI、音符事件、音高轮廓、SVG 和 JSON。
- [字体文件检视器（TTF / OTF / WOFF / WOFF2）](https://elysiatools.com/zh/tools/font-file-inspector): 上传 TTF、OTF、WOFF 或 WOFF2 字体文件（WOFF2 自动解压），检视完整元数据：家族/子族/设计师/版权/版本、字形数、unitsPerEm、字重与宽度级别、斜体角度、风格标志、包围盒；按 Unicode 区块统计覆盖热力图；渲染字形 SVG 预览（可自定义文本，图标字体自动采样）；列出 GSUB 连字（liga）与 OpenType 特性；可变字体显示 fvar 轴与命名实例。
- [图片角落水印工具](https://elysiatools.com/zh/tools/image-watermark-corner): 为图片添加角落水印，可自定义位置、大小、透明度和多角落选项
- [图片对角水印工具](https://elysiatools.com/zh/tools/image-watermark-diagonal): 为图片添加对角水印，可自定义角度、大小、透明度和沿对角线位置
- [图片水印工具](https://elysiatools.com/zh/tools/image-watermark-image): 为图片添加图片水印，可自定义位置、大小、透明度和旋转角度
- [图片透明度水印工具](https://elysiatools.com/zh/tools/image-watermark-opacity): 为图片添加具有自定义透明度的水印，支持文字和图片水印，具有高级透明度控制功能
- [图片平铺水印工具](https://elysiatools.com/zh/tools/image-watermark-tile): 为图片添加平铺水印，可自定义大小、透明度、间距和图案样式
- [SVG 图表逆向数据提取器](https://elysiatools.com/zh/tools/svg-chart-to-data-extractor): 从 SVG 折线图、柱状图、饼图等结构中逆向提取数据点并输出 JSON/CSV

## 示例

- [SVG示例](https://elysiatools.com/zh/samples/svg-samples): 可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
- [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式

## 相关内容

- [SVG、Favicon 与图标资产工作流工具](https://elysiatools.com/zh/hubs/svg-favicon-icon-workflows): 在一个专题中完成 favicon 套件生成、SVG 优化、ICO/PNG/JPG/WebP/SVG 之间的图标转换，以及面向网页交付的图像资产准备。
- [音频编码与格式转换工具](https://elysiatools.com/zh/hubs/audio-convert): 在一个专题里比较音频格式转换、码率调整、采样率转换、编码切换和导出工具，适合交付与归档工作流。
- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。