Frosted glass effect with CSS and SVG

Looks nice, but I really love the Google Font API trick there; I did not know that by using the text querystring, you can build a custom font with just the letters you need :)

Relevant line &#x2F; explanation: two backgrounds, top layer is a gaussian blur inside SVG, second one is the image that will be blurred.<p><pre><code> background-image: url(&quot;data:image&#x2F;svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20width%3D%221920%22%20height%3D%221120%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cimage%20xlink%3Ahref%3D%22http%3A%2F%2Fplacekitten.com%2F1920%2F1120%22%20width%3D%221920%22%20height%3D%221120%22%20filter%3D%22url%28%23blur%29%22%2F%3E%3C%2Fsvg%3E&quot;), url(&quot;http:&#x2F;&#x2F;placekitten.com&#x2F;1920&#x2F;1120&quot;);</code></pre>

I&#x27;ve seen this a bunch of places, until it&#x27;s done real time with arbitrary images + content, I don&#x27;t really see the value.<p>Would be cool if we could do it for translucent toolbar etc.

Awesome demo, but unfortunately rather slow on my (oldish) Macbook.<p>I also recently made a page with frosted glass effect, but opted for pre-rendered images because of those performance issues: <a href="https://eggerapps.at/pgcommander/fancy-index.html" rel="nofollow">https:&#x2F;&#x2F;eggerapps.at&#x2F;pgcommander&#x2F;fancy-index.html</a> (But I decided the effect was too playful for my website and so it&#x27;s not public)

There is still one problem with using the blur filter in CSS. It&#x27;s all about the edges.<p>As you increase the blur the edges shrink inwards. This makes it difficult to get a frosted glass effect with more blur. Try setting a higher blur, eg:<p><pre><code> -webkit-filter: blur(20px); filter: blur(20px);</code></pre>

Blur is really slow, esp. when you&#x27;re trying to animate it (to get a cool &quot;materialization&quot; effect).

Really cool effect. Great way to get it without resorting to images.<p>In the future, I wonder if something like this could be done with the -filter attributes, though those may only work on images. I know those have been used to do blurring before, though possibly not in the same way.

Ah, I implemented frosted glass years ago in SVG using the BackgroundImage source for a feGaussianBlur (composed with other filters, of course). It works fairly well in Inkscape and other such tools, but alas! No browsers supported it and I believe that it is still the case that no browsers support it.<p>Of course, there are security implications, but those are fairly trivial given the infrastructure already in place.

can someone explain what magic is going on inside &quot;.glass::before&quot; with the background image and svg filter?

That&#x27;s one heck of a cute cat!