玻璃晶质发生器

background-filter:blur() 是磨砂玻璃外观背后的 CSS 属性 - 一个半透明面板，可以模糊其后面移动的任何内容，而不仅仅是褪色平面颜色。问题是模糊质量几乎不可能根据静态样本来判断。只有当有东西在其下方实际移动时，它才具有说服力，就像在包含内容、视频或动画英雄的真实页面上一样。该生成器将预览卡放置在真正的动画背景上，而不是静止的背景上，因此您在拖动滑块时看到的就是访问者实际体验到的。

背景是真正的 CSS 动画：以元素大小的 400% 绘制的大线性渐变，@keyframes 在循环中来回移动其背景位置 - 没有 JavaScript 动画循环，没有画布，只是与制作英雄部分中使用的相同的连续背景位置技术。模糊、色调颜色和不透明度、边框突出显示颜色/不透明度/宽度、角半径和阴影柔和度都驱动浮动卡的实时样式，并且可复制的 CSS 框镜像完全相同的值。

并非每个浏览器都支持背景过滤器，因此生成器还会发出真正的 @supports not (backdrop-filter: Blur(1px)) 块 - 不是令牌手势，而是一个后备规则，其背景颜色是根据实际色调不透明度计算得出的。因为没有模糊的半透明度看起来明显更差（无论其后面的内容通过未模糊显示），后备会自动将 Alpha 通道提升到您选择的色调不透明度之上，并且生成的 CSS 中的注释准确解释了原因以及提升了多少。

一切都在您自己的浏览器中计算和呈现：无需上传，无需帐户，无需服务器往返。一旦卡片看起来正确，就复制 CSS，将其放在您想要放置在照片、视频或渐变上方的任何元素上，并保留 @supports 块，以便较旧的浏览器仍然可以获得可读、更不透明的卡片，而不是几乎不可见的卡片。