The Frosted Glass effect: how to blur out an image or page.
A frosted glass effect is an effect where a part of an image or page is blurred out. You may recognise this effect from Apple's iPhones where the menu overlay blurs the background behind. These days there are numerous ways to create a frosty glass effect with HTML and CSS. In Safari for example, you could use the CSS backdrop filter to achieve the same result. But that's only one browser, Chances are if you found this article and are reading this, you might be looking for an alternative to the CSS backdrop-filter, you could also use this technque as a fallback. But you won't have to, since instead of CSS, we're using SVG to create the frosty effect.
This frosty glass technique is tested and works in the following browsers:
I was looking for a good way to use this effect for a client project. While trying different methods to go about this I found none to be quite useful to use in a production environment. I didn’t want to use the popular “blurry background on sharp background” technique you probably found when searching for a frosted glass effect, because of the obvious positioning headaches you’re going to have when working with background images. I tried a jQuery plugin that didn’t live up to my expectations. So I decided to make my own solution;
What I needed;
I wanted the frosted effect to be behind an absolutely positioned div, depending on the viewport size the positioning can be different.
It needs to be cross-browser compatible, at least in Chrome, Firefox, Internet Explorer and Safari. Because of this, I have no issues with not using a CSS only solution. As long as it works reliably.
It needs to be flexible enough, because I have no way of knowing how much text a client is going to be placing in the frosted part.
It needs to be simple to implement. Because there are already enough complicated solutions out there.
My solution
I thought of a way that I haven’t seen being used when doing my initial research. I decided to duplicate the image, use SVG to a blur effect, then use CSS to crop the SVG to the dimensions of the content overlay, creating a frosted glass effect that works reliably across all major browsers. The positioning of the CSS crop is going to be calculated using jQuery.
Easy enough, let’s get to it!
I decided to use SVG to create a duplicate image, and apply blur with SVG. Using SVG instead of CSS ensured cross-browser compatibility, making this work in Internet Explorer as well.
Note: Make sure to place your own corresponding image dimensions in the viewBox tag. Also, feel free to adjust the amount of blur you want by adjusting the stdDeviation number.
This is pretty straightforward, the image is stretched to 100% of the viewport, with the SVG being positioned on top of that.
Note: The positioning of the text on top of the image, is completely flexible by controlling positioning of the ".pad" div with CSS flex-properties. The blur overlay we're creating using jQuery adjusts itself to its position, so feel tree to play around with the best positioning for your project!
This is the interesting part, calculating the position of the content div. We are cropping the svg to the size of the image.
Note: In our situation the calculations need to be made when the images are fully loaded, therefor we are using window load, which executes the code after all content is loaded on the page. If you are using jQuery 3+, and are running into issues, try using $(window).on('load', function () {};
$(window).load(function() {
$('.banner').each(function() {
var blockWidth = $('.banner .inner').width();
var blockHeight = $('.banner .inner').height();
var offsetLeft = $(".banner .wrap").offset().left;
var offsetTop = $(".banner .inner").position().top;
var offsetRight = parseInt(blockWidth) + parseInt(offsetLeft);
var offsetBottom = parseInt(blockHeight) + parseInt(offsetTop);
$('.blur').css({'clip': 'rect('+offsetTop+'px,'+offsetRight+'px,'+offsetBottom+'px,'+offsetLeft+'px)'});
});
});
