Design & Accessibility
What is Glassmorphism?
Glassmorphism is a UI style that mimics frosted glass with transparency and background blur (backdrop-filter).
Glassmorphism creates cards and panels that look like translucent glass, combining transparency, blur of what is behind (backdrop-filter), a subtle border and shadow for depth.
It is a pure-CSS effect, popular in modern interfaces. It works best over colorful or gradient backgrounds, and should respect text contrast to keep readability.
Use it in practice
Glassmorphism Generator
Related terms
Frequently asked questions
Does glassmorphism work in all browsers?
backdrop-filter is supported in modern browsers; on older ones, use a solid background fallback.
Does the effect hurt accessibility?
It can, if text loses contrast. Check the contrast over the background to keep readability (WCAG).