As stated in other answers this can be achieved with:
- A copy of the blurred image as the background.
- A pseudo element that can be filtered then positioned behind the content.
There is a supported property called backdrop-filter
, and it is currently
supported in Chrome 76, Edge, Safari, and iOS Safari (see caniuse.com for statistics).
From Mozilla devdocs:
The backdrop-filter property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element's transparency/opacity.
See caniuse.com for usage statistics.
You would use it like so.
If you do not want content inside to be blurred use the utility class .u-non-blurred
.background-filter::after {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
content: "";
display: block;
position: absolute;
width: 100%; height: 100%;
top: 0;
}
.background-filter {
position: relative;
}
.background {
background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
width: 200px;
height: 200px;
}
.u-non-blurred {
position: relative;
z-index: 1;
}
<div class="background background-filter"></div>
<div class="background background-filter">
<h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>
Update (12/06/2019): Chromium will ship with backdrop-filter
enabled by default in version 76 which is due out 30/07/2019.
Update (01/06/2019): The Mozzilla Firefox team has announced it will start working on implementing this soon.
Update (21/05/2019): Chromium just announced backdrop-filter
is available in chrome canary without enabling "Enable Experimental Web Platform Features" flag. This means backdrop-filter
is very close to being implemented on all chrome platforms.