什么是CSS玻璃形态生成器？
CSS GlassMorphism Generator 是磨砂玻璃 UI 风格的可视化编辑器，其中半透明的表面使任何东西都模糊不清。 您可以使用滑块调整背景模糊、填充透明度、饱和度、色调和角半径，在彩色背景上观看预览更新，并复制其生成的确切 CSS。
GlassMorphism 依赖于背景过滤器属性，它对元素后面的内容应用模糊而不是元素本身。 结合半透明背景、发际线边框和柔和的阴影，它产生了现代操作系统普及的分层玻璃外观。 手工获得平衡是很繁琐的，因此该工具管理每个值并输出一个干净、可复制的块。
Everything都在你的浏览器中运行,选择一个预设,如Frosted,Dark或Vibrant,微调滑块,复制CSS - 包括 -webkit-前缀背景-过滤器,以获得更广泛的支持,没有帐户,没有上传,一旦页面加载,它就会保持离线工作。
效果取决于两个属性协同工作,如果缺少任何一个,它都会默默失败。背景过滤器模糊了元素后面的任何东西,因此它需要部分透明的背景颜色来显示:在完全不透明的情况下没有什么可看的,并且在完全没有背景的情况下表面消失了。它背后还需要一些值得模糊的东西,这就是为什么效果看起来像平板在平坦的背景上,在照片上变得活跃。两种实际成本。背景模糊是复合起来更昂贵的东西之一,特别是在大面积或滚动过程中。半透明表面上的文本具有对比度,随着下面的任何内容而变化,因此它可以在一个背景上通过对比度检查,而在另一个背景上失败。
作为玻璃态 CSS 生成器,它从 Frosted 预设开始,该预设的复制块读取:背景:rgba(255、255、255、0.2);背景滤波器:blur(10px)饱和(120%);再次与 -webkit-backdrop-filter 相同值;边框半径:16px;边框:1px 实体 rgba(255、255、255、0.18);盒子阴影:0 8px 32px rgba(0、0、0、0.12)。单击"黑暗",背景会更改为带有 12px 模糊的 rgba(15、23、42、0.25),这是用于光照的版本。
如何使用CSS GlassMorphism生成器？
选择一个预设
从磨砂、浅色、黑暗、充满活力或微妙的开始，以获得平衡的玻璃外观，然后对其进行细化以匹配您的设计。
调整玻璃
拖动背景模糊、透明度和饱和度滑块，选择色调颜色，然后设置角落半径。 预览更新在色彩丰富的背景上直播，因此模糊可见。
切换边界
打开或关闭发际线边框。 一个微妙的 1px 半透明白色边框出售玻璃边缘，尤其是在较暗的背景下。
复制CSS
复制生成的块 - 背景、背景过滤器(带有 -webkit-前缀)、边框半径、边框和阴影 - 并将其粘贴到您的卡或面板上。
主要特点
背景模糊控制
专用的模糊滑块驱动背景过滤器,该过滤器使元素(玻璃效果的核心)后面的任何东西结霜
全表面造型
透明度、饱和度、色调、角半径和可选的细线边框让您可以在完全的玻璃外观中进行拨号
实时预览
预览位于彩色梯度上,因此您可以看到背景模糊工作,在编辑时立即更新
前缀输出
输出包括 backdrop-filter 和 -webkit-backdrop-filter 前缀，因此该效果适用于 Safari 和其他 WebKit 浏览器
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!