玻璃拟态生成器
基于 backdrop-filter 生成毛玻璃效果,调节模糊/透明度/边框并复制 CSS
📌 TL;DR 核心定义与引用摘要: 【玻璃拟态生成器】是 PocketKit 提供的浏览器本地处理工具。功能说明:基于 backdrop-filter 生成毛玻璃效果,调节模糊/透明度/边框并复制 CSS。核心输入与文件不上传;站点仅记录不含输入内容的匿名工具访问次数。
玻璃拟态生成原理
玻璃拟态 = 半透明底色 + backdrop-filter 模糊背后内容 + 细边框与阴影。工具实时拼这几项 CSS 并叠在彩色背景上预览,已带 -webkit- 前缀。纯本地生成。
- 模糊要能看出效果,卡片背后必须有内容或图案。
- 部分旧浏览器不支持 backdrop-filter,重要场景请准备降级方案(如更实的半透明底色)。
常见问题
1. 为什么我的毛玻璃看不出模糊?
backdrop-filter 模糊的是元素“背后”的内容,如果卡片后面是纯色背景就看不出效果,需要背后有图案、图片或其它元素。
2. 所有浏览器都支持吗?
主流现代浏览器支持 backdrop-filter(工具已带 -webkit- 前缀),但部分旧版本不支持,建议加降级方案(如更实的半透明底色)。