🧊
Glassmorphism CSS Generator
Adjust the frosted-glass effect and copy the backdrop-filter CSS.
Settings
16px
20%
160%
20px
30%
Glassmorphism
CSS
background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 20px;
광고
The glassmorphism generator lets you preview a frosted-glass card design by adjusting background blur, opacity, and border values, then copy the finished CSS code directly.
The three key elements of glassmorphism
A translucent background (opacity), a background blur effect (backdrop-filter blur), and a subtle border need to work together for the glass texture to look natural.
Frequently Asked Questions
Does it look the same in every browser?
The backdrop-filter property is supported in most modern browsers, but the blur effect may not display in older ones.
Does it suit light or dark backgrounds better?
The glass texture generally stands out more when placed over a gradient or an image background.
Ad
광고