WarpFor developers · backdrop-filter + SVG filter
Liquid glass generator
Frosted glass that also bends what is behind it. Blur and saturation work everywhere; the refraction is a Chromium extra, and the code is written so the other browsers degrade cleanly.
Background text stays readable through the glass. Blur and saturation lift it; refraction bends it.
What each part does
- backdrop-filter: blur() saturate() is the frosted base and works in every current browser.
- feTurbulence → feGaussianBlur → feDisplacementMap moves the backdrop's pixels by a smoothed noise field. Low frequency gives broad, glassy ripples; high frequency looks like water.
- The tint is a translucent background color on the card; the edge highlight is a 1px inset box-shadow that fakes a lit rim.
- @supports (backdrop-filter: url(#x)) is not reliable as a feature test, so the code applies the plain blur first and layers the url() filter after it. Browsers that cannot resolve the url() drop the whole declaration and keep the earlier one.
Frequently asked questions
Which browsers show the refraction?
The displacement part (backdrop-filter: url(#filter)) renders in Chromium browsers: Chrome, Edge, Opera, Brave. Safari and Firefox ignore the url() and show only the blur and saturation from the @supports fallback, which still looks like frosted glass.
Why does it stutter on my phone?
backdrop-filter re-renders everything behind the element on every frame. Keep the glass element small, avoid animating things behind it, and use one octave of noise. Test on a mid-range Android phone, not only a laptop.
Can I put the filter on a fixed header?
Yes. That is the most common use. Give the header will-change: backdrop-filter sparingly, and keep the blur radius under 20px so scrolling stays smooth.
Do I need the SVG on every page?
The filter must exist in the DOM of the page that uses it. Put the zero-size SVG once near the end of body, or inline it in your layout template.