Glassmorphism Done Right: Frosted Glass Without the Gimmicks
Glassmorphism looks great when done well and cheap when done poorly. Here is how I use frosted glass effects without falling into common traps. Glassmorphism, the frosted glass aesthetic characterized by translucent backgrounds and background blur, became ubiquitous a few years ago and then developed a reputation for being overused and gimmicky. The reputation is partly deserved. Most glassmorphism implementations are technically wrong, visually muddy, or inaccessible. But the effect itself is still useful when applied with discipline. After using it across many projects, here is how I do glassmorphism without the gimmicks. The Core Property Is backdrop-filter The effect relies on backdrop-filter: blur(), which blurs whatever is behind the element. The element itself has a semi-transparent background, so the blurred background shows through tinted. This is what produces the frosted glass appearance. Without backdrop-filter, you cannot achieve true glassmorphism, only a flat translucent overlay. .glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; } The webkit prefix is still needed for Safari support. The background color is a low opacity white, which tints the blurred content lightly. A subtle border in a slightly more opaque white gives the glass edge definition. More guides are on the Spark Blog.