Presets
Glassmorphism
Blur10px
Transparency20%
Saturation120%
Radius16px
Generated CSS
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Category:css
Mode:Offline
Version:1.0.0
Access:Free
什么是CSS玻璃形态生成器？
CSS GlassMorphism Generator 是磨砂玻璃 UI 风格的可视化编辑器，其中半透明的表面使任何东西都模糊不清。 您可以使用滑块调整背景模糊、填充透明度、饱和度、色调和角半径，在彩色背景上观看预览更新，并复制其生成的确切 CSS。
GlassMorphism 依赖于背景过滤器属性，它对元素后面的内容应用模糊而不是元素本身。 结合半透明背景、发际线边框和柔和的阴影，它产生了现代操作系统普及的分层玻璃外观。 手工获得平衡是很繁琐的，因此该工具管理每个值并输出一个干净、可复制的块。
Everything都在你的浏览器中运行,选择一个预设,如Frosted,Dark或Vibrant,微调滑块,复制CSS - 包括 -webkit-前缀背景-过滤器,以获得更广泛的支持,没有帐户,没有上传,一旦页面加载,它就会保持离线工作。
效果取决于两个属性协同工作,如果缺少任何一个,它都会默默失败。背景过滤器模糊了元素后面的任何东西,因此它需要部分透明的背景颜色来显示:在完全不透明的情况下没有什么可看的,并且在完全没有背景的情况下表面消失了。它背后还需要一些值得模糊的东西,这就是为什么效果看起来像平板在平坦的背景上,在照片上变得活跃。两种实际成本。背景模糊是复合起来更昂贵的东西之一,特别是在大面积或滚动过程中。半透明表面上的文本具有对比度,随着下面的任何内容而变化,因此它可以在一个背景上通过对比度检查,而在另一个背景上失败。
如何使用CSS GlassMorphism生成器？
1
选择一个预设
从磨砂、浅色、黑暗、充满活力或微妙的开始，以获得平衡的玻璃外观，然后对其进行细化以匹配您的设计。
2
调整玻璃
拖动背景模糊、透明度和饱和度滑块，选择色调颜色，然后设置角落半径。 预览更新在色彩丰富的背景上直播，因此模糊可见。
3
切换边界
打开或关闭发际线边框。 一个微妙的 1px 半透明白色边框出售玻璃边缘，尤其是在较暗的背景下。
4
复制CSS
复制生成的块 - 背景、背景过滤器(带有 -webkit-前缀)、边框半径、边框和阴影 - 并将其粘贴到您的卡或面板上。
主要特点
背景模糊控制
专用的模糊滑块驱动背景过滤器,该过滤器使元素(玻璃效果的核心)后面的任何东西结霜
全表面造型
透明度、饱和度、色调、角半径和可选的细线边框让您可以在完全的玻璃外观中进行拨号
实时预览
预览位于一个丰富多彩的渐变中，因此您可以实际看到背景模糊，在编辑时立即更新
前缀输出
输出包括 backdrop-filter 和 -webkit-backdrop-filter 前缀，因此该效果适用于 Safari 和其他 WebKit 浏览器
Frequently Asked Questions
GlassMorphism 是一种 UI 风格，面板看起来像磨砂玻璃：半透明的背景与背景模糊相结合，因此它后面的内容柔和地显示出来。 它通常会添加一个薄的半透明边框和一个柔和的阴影来定义玻璃边缘。
Related Tools
CBR
css
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CFG
css
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.
CNG
css
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
BAG
web
Basic Auth Generator
Turn a username and password into an HTTP Basic Authentication header, curl command and fetch snippet, and decode existing Basic auth tokens back.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
glassmorphism generatorcss glassmorphismfrosted glass cssbackdrop-filter cssglass effect cssglass ui generatorblur background cssfrosted glass generator