Glassmorphism 玻璃拟态
Glassmorphism builds interfaces from translucent, frosted panels: the background — usually something vivid — blurs through each surface, a thin light border catches the 'edge' of the glass, and layers stack with soft shadows to sell the depth. The style lives or dies by its backdrop: over a plain background the glass reads as plain grey; over a colorful gradient it glows.
玻璃拟态用半透明的磨砂玻璃面板搭建界面：背景 —— 通常是鲜艳的东西 —— 透过每一层表面模糊地显出来，一条细细的浅色描边勾住玻璃的「边缘」，层与层之间用柔和的投影堆出纵深。这个风格的生死全看背景：背景平淡，玻璃就只是一片灰；背景是彩色渐变，它就发光。
Scope: Covers the generic frosted-glass content style. Apple's system-wide adaptive material is Liquid Glass (its own entry), and the older macOS behind-window blur is vibrancy — a UI term, not a style.
范围：覆盖通用的磨砂玻璃内容风格。Apple 的全系统自适应材质是液态玻璃（Liquid Glass，另有条目），更早的 macOS 窗口后模糊叫 vibrancy —— 那是一个 UI 术语，不是一种风格。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Frosted translucent panels磨砂半透明面板 surface defining定义特征
Surfaces are semi-transparent with a strong background blur — content behind is visible but softened, like frosted glass.
表面半透明，带强烈的背景模糊 —— 背后的内容看得见但被柔化，像磨砂玻璃。
-
Vivid backdrop showing through鲜艳背景透出来 color defining定义特征
A colorful gradient, photo, or aurora sits behind the glass; its color bleeds through every panel and IS most of the palette.
玻璃后面垫着彩色渐变、照片或极光；它的颜色渗进每一块面板，几乎就是全部配色。
-
Thin light edge细细的亮边 geometry defining定义特征
A 1px semi-transparent white border (often brighter on top) catches the rim of each panel, separating glass from glass.
一条 1px 的半透明白边（通常顶部更亮）勾出每块面板的边缘，把玻璃和玻璃分开。
-
Layered floating depth层叠的悬浮纵深 depth defining定义特征
Panels float above the backdrop and above each other with soft, wide shadows — the stack of sheets is part of the look.
面板悬浮在背景之上、也彼此悬浮，配柔和的大范围投影 —— 这一叠「薄片」本身就是观感的一部分。
-
Light ink on glass玻璃上的浅色文字 typography supporting辅助特征
Text and icons are usually white or near-white with slight transparency steps for hierarchy.
文字和图标通常是白色或近白色，用轻微的透明度阶梯区分层级。
-
What the backdrop is背景是什么 imagery variable可变特征
Gradient mesh, aurora, photography, or brand color field — any vivid, soft backdrop works; the glass recipe stays the same.
渐变网格、极光、摄影、品牌色域 —— 任何鲜艳柔和的背景都行；玻璃的配方不变。
-
Opaque or unblurred panels不透明或不模糊的面板 surface avoid避免
Solid cards (or transparency without blur) lose the frosted read — transparency alone is just low opacity, not glass.
实色卡片（或者只透明不模糊）会失去磨砂的感觉 —— 只有透明只是低不透明度，不是玻璃。
Often confused with: Liquid Glass最容易混淆：液态玻璃
Glassmorphism玻璃拟态
Liquid Glass液态玻璃
This is glassmorphism because the frosted treatment is a generic decorative skin — content cards, dashboards, whole panels can all be glass over a wallpaper you chose.
这是玻璃拟态，因为磨砂处理是一种通用的装饰皮肤 —— 内容卡片、仪表盘、整块面板，全都可以是你自选壁纸上的玻璃。
It would become Liquid Glass if the glass were reserved for the CONTROL layer — bars, buttons, navigation floating above app content — using Apple's adaptive material that lenses and re-tints from whatever scrolls beneath it.
如果玻璃只留给控制层 —— 悬浮在应用内容之上的栏、按钮、导航 —— 用的是 Apple 那种会对下方滚动内容做透镜折光并重新染色的自适应材质，就变成液态玻璃了。
In code — optional starting points代码写法 —— 可选起点
The core glass panel recipe
background: rgba(255,255,255,.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.25); border-radius: 16px;Fallback: without blur support, go near-opaque
@supports not (backdrop-filter: blur(1px)) { background: rgba(30,30,40,.85); }System material ≈ frosted panel (see also Liquid Glass)
.background(.ultraThinMaterial)Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using glassmorphism. Defining signals: semi-transparent panels with a strong backdrop blur; a vivid gradient or photographic backdrop whose color bleeds through every panel; a thin 1px semi-transparent white border on each panel edge; layered floating depth with soft wide shadows. Keep the backdrop's specific colors and imagery flexible. Use CSS backdrop-filter: blur(16px) with background: rgba(255,255,255,0.12) (or a dark equivalent) and border: 1px solid rgba(255,255,255,0.25). Do not drift into Apple's Liquid Glass; the decisive difference is that glassmorphism is a decorative skin for any surface including content cards, while Liquid Glass reserves glass for the floating control layer above content. Preserve readable text over every region the backdrop can produce (add a contrast scrim if needed), visible controls and focus states, and reduced-motion/reduced-transparency fallbacks.
用玻璃拟态（glassmorphism）创建这个界面。决定性信号：半透明面板带强烈的背景模糊；鲜艳的渐变或摄影背景，颜色渗进每一块面板；每块面板边缘有一条 1px 的半透明白边；用柔和大投影做出层叠悬浮的纵深。背景的具体配色和图像保持灵活。使用 CSS backdrop-filter: blur(16px)，配 background: rgba(255,255,255,0.12)（或等价的深色）和 border: 1px solid rgba(255,255,255,0.25)。不要滑向 Apple 的液态玻璃；决定性区别在于玻璃拟态是给包括内容卡片在内的任何表面用的装饰皮肤，而液态玻璃把玻璃留给悬浮在内容之上的控制层。保证文字在背景可能出现的任何区域上都可读（必要时加一层对比度 scrim），控件和焦点状态可见，并提供 reduced-motion / reduced-transparency 的降级方案。
Accessibility & misuse可访问性与误用
Text contrast over glass is unstable: the backdrop moves and varies, so measure against the worst region or add a translucent contrast scrim behind text.
玻璃上的文字对比度不稳定：背景会动、会变，所以要对着最差的区域实测，或者在文字背后加一层半透明的对比度 scrim（衬底层）。
Honor prefers-reduced-transparency (and OS 'Reduce transparency') with near-opaque fallbacks.
用接近不透明的降级方案响应 prefers-reduced-transparency（以及系统的「降低透明度」设置）。
backdrop-filter is expensive on low-end devices; the layout must survive its absence — never hide content behind a failed blur.
backdrop-filter 在低端设备上开销很大；布局必须在它失效时依然成立 —— 永远别让内容被一块失败了的模糊遮住。
Origin起源
The effect is decades old — Windows Vista's Aero glass (2006), iOS 7's blur layers (2013), macOS vibrancy — but the style label dates to Michal Malewicz's 2020 article, after the look spread through Dribbble and Big Sur-era redesigns.
这种效果有几十年历史了 —— Windows Vista 的 Aero 玻璃（2006）、iOS 7 的模糊图层（2013）、macOS 的 vibrancy —— 但这个风格标签出自 Michal Malewicz 2020 年的文章，在此之前它已在 Dribbble 和 Big Sur 时代的重设计里传开。