Build Real Frosted Glass in CSS with an SVG Displacement Filter

Summary

Set upWhat you need

• A page where you can add both HTML and CSS (a custom HTML block in your site builder, or your codebase)

• A colorful or detailed background behind the panel, since glass effects are invisible over flat color

• The MDN backdrop-filter reference for options and browser support

• About 30 minutes, including cross-browser testing

Do thisStep by step

1. 1

   Understand why blur alone looks flat

   backdrop-filter: blur() only averages the pixels behind your element, so you get a soft but flat panel. Real glass refracts, so the background should look slightly bent and distorted through it.

2. 2

   Add an SVG filter with a noise texture

   Put a hidden SVG on the page containing a <filter id="lg">. Inside it, use feTurbulence with type="fractalNoise" to generate a noise texture. Reel Playbooks addition: the reel's exact baseFrequency is cut off on screen; start around 0.01 (lower means larger, smoother waves) and give it result="n" so the next step can use it.

3. 3

   Displace the backdrop with that noise

   Add feDisplacementMap with in="SourceGraphic" and in2="n" so each backdrop pixel is shoved sideways by the noise. Reel Playbooks addition: the reel's scale value is cut off on screen; try 20 and adjust. A full starter version: <svg width="0" height="0" style="position:absolute"><filter id="lg"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="20" xChannelSelector="R" yChannelSelector="G"/></filter></svg>

4. 4

   Feed the filter into backdrop-filter next to your blur

   On your panel, reference the filter in the same declaration as the blur. The reel uses: backdrop-filter: url(#lg) blur(3px) saturate(180%); with border-radius: 24px on a 320 by 200 pixel .glass panel.

5. 5

   Add a 1px lit edge

   Finish with a one pixel white inset highlight so the top edge catches the light: box-shadow: inset 0 1px 0 #ffffff5c;. That is the step that makes it stop being a div and start reading as an object with thickness.

6. 6

   Test across browsers

   Reel Playbooks addition: SVG filters inside backdrop-filter are not supported in every browser; in our understanding they render mainly in Chromium-based browsers (Chrome, Edge), while Safari and Firefox may ignore the effect. Check the panel in each browser, and if it breaks, keep a plain backdrop-filter: blur(12px) saturate(180%); version as your fallback.

Heads upCommon mistakes & tips

• Background matters. Stripes, gradients or photos behind the panel show off the bend; a flat background hides it.

• Reel Playbooks addition: keep the scale modest; too much displacement makes text behind or on the panel hard to read.

• Reel Playbooks addition: check text contrast on top of the glass, since busy backgrounds can drop it below readable levels.

• Reel Playbooks addition: backdrop filters can be expensive on low-end phones; avoid stacking many glass panels or animating them.

• Reel Playbooks addition: the hidden SVG needs zero size but must stay in the page; do not set it to display: none or the filter may stop working.

• Reel Playbooks addition: using an AI coding tool? Paste this playbook's code and ask it to apply the effect only to one component, then test it in two browsers.

MeasureHow to know it worked

ProvenanceSource & adaptation notes

AttributionCredit