Mastering Frosted‑Glass Blur: 4 CSS/JS Techniques and Common Pitfalls

Background: The author added frosted‑glass blur effects in several projects and recorded implementation methods and pitfalls.

Usage scenarios

Various UI components require blur effects, illustrated by the following images.

Four implementation methods and compatibility

filter : blurs the element and its children; compatibility similar to canvas, CSS filter, and SVG filter.

backdrop-filter : blurs the background behind the element; compatibility slightly worse.

svg : applies a filter via an SVG element; compatibility comparable to other filters.

canvas : allows localized blur using canvas; compatibility comparable to other methods.

Compatibility comparison: canvas API, CSS filter, and SVG filter have similar support; backdrop‑filter has poorer support.

CSS filter properties

blur – Gaussian blur (e.g., filter: blur(5px);)

brightness – adjust brightness (e.g., filter: brightness(0.4);)

contrast – adjust contrast (e.g., filter: contrast(200%);)

drop-shadow – shadow effect (e.g., filter: drop-shadow(16px 16px 20px blue);)

grayscale – grayscale (e.g., filter: grayscale(50%);)

hue-rotate – hue rotation (e.g., filter: hue-rotate(90deg);)

invert – invert colors (e.g., filter: invert(75%);)

opacity – opacity (e.g., filter: opacity(25%);)

saturate – saturation (e.g., filter: saturate(30%);)

sepia – sepia tone (e.g., filter: sepia(60%);)

Filter implementation example

Using a panel with a pseudo‑element to create a blurred background layer and a content layer for text.

.panel{color: rgb(255,255,255);margin-top:-162px;background-color: rgb(32,0,77);overflow:hidden;position:absolute;border-radius:20px;&::before{content:'';background:url('./assets/headerBg.png') no-repeat center center;background-size:375px 442px;-webkit-filter: blur(50px) brightness(60%);-moz-filter: blur(50px) brightness(60%);filter: blur(50px) brightness(60%);position:absolute;top:0;top:-280px;width:375px;height:442px;}}.content{position:relative;z-index:2;}

Common pitfalls

iOS lottie stutter – attempted fix with -webkit-transform: translateZ(0px); (ineffective).

White‑screen scrolling on iPhone X/iPad – attempted fixes with background color and -webkit-overflow-scrolling: touch; (ineffective).

Unexpected color artifacts on iPhone X – observed issue.

Backdrop‑filter implementation

Apply a semi‑transparent layer with blur:

background-color: rgba(32,0,77,0.5);-webkit-backdrop-filter: blur(50px);backdrop-filter: blur(50px);

Pitfalls

Poor compatibility – use @supports to provide fallback styles.

Possible white edges – add overflow:hidden;.

SVG implementation

Define an SVG filter and apply it to an image element.

<svg xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="10"/></filter><image filter="url(#blur)" x="0" y="0" width="100%" height="100%" xlink:href="...png" alt=""/></svg>

Canvas implementation

Use the stackblur-canvas npm package to blur specific regions.

Package URL: https://www.npmjs.com/package/stackblur-canvas

Conclusion

Backdrop‑filter often best meets UI requirements for partial background blur with additional effects, though its compatibility is limited. For broader support, CSS filter or SVG can be used; for localized blur, canvas is suitable.