Spatial Glass空间玻璃
Frosted, translucent layers floating over a dark, lit background.磨砂、半透的层,浮在深色、有光的背景上。
Where it is in its life它走到哪一步了
Still climbing, not yet default. The Are.na reference board is active (81 blocks). A real window before it’s everywhere.还在上升,尚未成为默认。Are.na 参考板活跃(81 块)。真正铺开之前还有一个窗口。
Weekly watchlist每周看板live实时
Ship it, don’t just see it不止看见,直接拿走
Copy the working snippet, or grab the palette and type as tokens for your project — CSS variables, Tailwind, or W3C design tokens. All free.复制能跑的代码片段,或把配色和字体作为 tokens 拿进项目——CSS 变量、Tailwind、W3C design tokens。全部免费。
What it is, and why now是什么,为什么现在
Spatial glass — glassmorphism grown up — stacks translucent, blurred panels with faint light edges, borrowing the language of visionOS and modern OS UI.空间玻璃——长大版的玻璃拟态——把半透、模糊的面板叠起来,带一圈微光边,借的是 visionOS 和现代操作系统 UI 的语言。
When to reach for it什么时候用它
Use for用在
- SaaS pages that must look new
- AI product UIs
- Dark-theme dashboards
- 想显新的 SaaS 落地页
- AI 产品界面
- 深色主题的仪表盘
Avoid for别用
- Low-end-device audiences (perf)
- High-accessibility needs
- 低端机型多的产品(性能)
- 无障碍要求高的
Colour, with roles配色 · 带角色
Type pairing字体搭配
Body — Inter.正文 — Inter。 Keeps captions and UI legible underneath it.让下面的说明和 UI 保持清晰可读。
Both open-source (Google Fonts), free for commercial use. Pairing + embed code in the Pro assets.均为开源(Google Fonts)、可商用。搭配与嵌入代码在 Pro 素材里。
It’s a material, not a filter是材质,不是滤镜
Use backdrop-filter for real blur, keep the layer count low, and add a 1px inner light edge to sell the ‘pane of glass’. Put something colourful behind it — glass with nothing to refract just looks grey.用 backdrop-filter 做真实模糊,层数压低,加一条 1px 的内侧亮边卖出"一块玻璃"的感觉。后面放点彩色的东西——没有可折射内容的玻璃只会灰扑扑。
Sources, not screenshots是来源,不是截图
Curated links to where this actually lives and gets documented — live boards for reference, editorial for pitch language, galleries to gauge saturation. We link out and credit rather than re-host anyone’s work.精选链接,指向这个方向真正活着、被记录的地方——实时参考板、给提案话术的编辑内容、判断饱和度的画廊。我们只链接并署名,不搬运任何人的作品。
A recipe配方
- Translucent blur layers + subtle light edges on a dark background
- backdrop-filter
- keep layer count down so it doesn’t turn to mush
- one accent is enough.
- 半透模糊层 + 微光边 + 深色背景衬
- backdrop-filter
- 控制层数别糊
- 一处点睛就够。
It’s all free全部免费
Every guide, the live timing, palettes and example images — all free. Get the weekly “what’s rising” email so you never miss a move.每份指南、实时时机、配色和范例图——全都免费。订阅每周“什么在涨”邮件,不错过任何动向。