Glassmorphism Generator
Visually generate Glassmorphism frosted glass effects with backdrop blur, translucency and fine borders.
Glass Parameters
Blur10px
Opacity0.2
Border Opacity0.25
Radius16px
Preset Effects
Live Preview
Glassmorphism
background: #ffffff33;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid #ffffff40;
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);Features
Glassmorphism simulates a frosted glass visual effect through backdrop blur, semi-transparent white and fine borders, emphasizing depth and layering. Widely used in modern UI design.
- Blur: Controls the blur amount of backdrop-filter; larger values produce a more pronounced frosted glass effect.
- Opacity: Controls the transparency of the background color; low opacity combined with blur creates the glass texture.
- Border: A semi-transparent border enhances the refraction at the glass edges, typically using low-opacity white.
- Presets: Provides common glassmorphism presets for one-click quick starts.
Usage Tips
- Background: Glassmorphism needs a colorful background to shine; gradients or images are recommended.
- Parameters: Blur 8-16px and opacity 0.1-0.3 are recommended; higher values lose the glass texture.
- Copy Code: Supports both CSS and Tailwind formats; click the copy button to use.
- Compatibility: backdrop-filter is well supported in modern browsers; older browsers need the -webkit- prefix.