CSS Glassmorphism Generator
Create frosted glass UI effects with blur, transparency, and backdrop-filter controls
About CSS Glassmorphism Generator
Create frosted glass UI effects with blur, transparency, and backdrop-filter controls — generate production-ready CSS in your browser.
How to use CSS Glassmorphism Generator
- 1Adjust the blur amount to control how frosted the glass effect appears.
- 2Set the opacity and border opacity for the glass layer.
- 3Pick a background color and adjust saturation for the glass tint.
- 4Preview the effect on a sample card with a colorful background behind it.
- 5Copy the CSS output and apply it to your elements.
Tips
- Glassmorphism works best with a colorful or image background behind the glass element.
- Keep blur between 10-20px for the classic frosted look — too much blur loses the glass effect.
- Test on Safari — backdrop-filter requires the -webkit- prefix for full cross-browser support.
Free vs paid limits
Free: basic controls. Starter+: premium features.
OneKitTools TeamUpdated 2.21.4