档案库 · 产品创意 · 产品决策 · 2025
Glass3D 的生成器通过叠加 CSS 图层，在各大现代浏览器中模拟高清玻璃效果
一个网页生成器通过叠加背景模糊、纹理和盒阴影斜面，打造磨砂玻璃 UI，并针对 Chrome、Safari 和 Firefox 的怪癖进行了优化。
Glass3D
当时的题目
There were plenty of glassmorphism generators, but the developer behind the Hacker News handle kris-kay wanted 'high-def' glass: a subtle translucent texture, adjustable blur, brightness and saturation, and a faux 3D bevel, not just a frosted pane. Months of experimentation showed each layer breaking in some browser—color bled at Chrome corners, texture muddled the bevel's specular highlight, and the bevel got blurred away by the backdrop-filter.
它是怎么成立的
玻璃拟态（磨砂、模糊的界面面板）在 2025 年的网页设计中无处不在，也因此催生了众多生成器。kris-kay（Hacker News 用户名）认为现有工具止步太早：它们模糊了面板背后的内容，却没有处理纹理、边缘斜面或深度等让玻璃看起来像玻璃的细节。
Glass3D 通过 CSS 属性分层来应对这个问题。元素本身承载背景模糊、亮度和饱和度；::before 和 ::after 伪元素则承载半透明纹理和由盒阴影构建的伪 3D 斜面。这种拆分是有意为之——将颜色和透明度移到主元素上，Chrome 角落会渗色；移动纹理，高光会被弄脏；移动斜面，backdrop-filter 会将其模糊掉。
生成器提供可调的模糊、亮度、饱和度和纹理，并为最近的 Chrome、Safari 和 Firefox（桌面和移动端）生成代码。作者称这是跨框架玻璃 SCSS/组件库的早期预览，并提醒说该效果非常消耗资源：最好作为点缀，而非大范围覆盖桌面元素。
妙在哪
- 分层优于单一属性：将模糊、纹理和斜面分布在元素和伪元素上，可以独立调整每一层而互不干扰。
- 将浏览器怪癖视为设计约束，产生的效果能兼容 Chrome、Safari 和 Firefox，而不仅仅是开发者自己的浏览器。
- 生成器加上代码输出让技术可复用：访客携带可用的 CSS 离开，而后续项目是组件库而非一次性演示。
- 对成本的坦诚赢得了信任：作者承认玻璃拟态消耗资源，应作为点缀使用，这一点得到了线程中注重性能的评论者的认可。
做出来什么
The Show HN of 2 July 2025 drew 420 points and 117 comments. Developers argued about whether layered CSS can match Apple's Liquid Glass, why backdrop-filter samples only the pixels immediately behind a surface, and how expensive high-radius blur is on real hardware.
可以借走的
通过将效果分解为独立的层，追求网页上的原生化设计获得了回报；一旦每层都有自己的表面，浏览器的怪癖就不再是敌人。
后来
在讨论帖中，Glass3D 成了纯 CSS 能力的参照点：评论者将其与 CodePen 和 Flutter 对 Apple Liquid Glass 的尝试进行比较，并引用了 Josh Comeau 对 backdrop-filter 为何只采样表面正后方像素的解释。kay 也承认，以组件库方式忠实克隆 Liquid Glass 跨浏览器并不实际，并透露组件库的演示网站仍在建设中。截至 2026 年 9 月收集，生成器仍在 glass3d.dev 运行，库仍是早期预览。
资料来源
发现哪里写错了？告诉我们。
轮到你了
你刚读完一个点子。把你手上的题目说出来，看看谁接过同样的题。
免费账号 · 3 次免费提问 · 不用绑卡