CSS Glassmorphism Generator
Design a glass (glassmorphism) effect with live preview — adjust blur, transparency, tint and border, then copy the CSS.
663 views
What Is Glassmorphism?
Glassmorphism is the frosted-glass look: a semi-transparent panel that blurs whatever is behind it using backdrop-filter: blur(), combined with a subtle border and shadow. It works best over colorful or image backgrounds — on a plain background the blur is invisible.
Move the sliders and watch the live preview; the CSS below updates instantly and is ready to copy. Remember the -webkit-backdrop-filter prefix for Safari, which the generated code already includes.
Frequently Asked Questions
Why does my glass effect look flat?
backdrop-filter only shows over a varied background — put the element above a gradient or image. Also check browser support: Safari needs the -webkit- prefix (included in the generated code).
Does backdrop-filter hurt performance?
Blur is GPU-accelerated but not free. Use it on a few key surfaces (cards, headers) rather than dozens of elements, and keep blur radii moderate on mobile.
Which values make a classic glass look?
A good starting point: white background at 15-25% opacity, 8-12px blur, 1px border with 30% white, and 16px radius — the defaults of this generator.
Similar Tools
Report a Problem
CSS Glassmorphism Generator