How can I blur the dynamic contents behind a div?

Question

Im working on a project with a full screen styled google maps page. Is there any way (css, jQuery, or other options...) to overlay a header and a slide-in sidebar with a blur effect similar to the iOS frosted/blur effect?

Im trying to achieve something like this. Sample blurred header

My problem is, because I don't control what is underneath the header and it constantly changes I can't use the 2 image trick to simulate a blurred background. Any suggestions?

While you can blur the current element, I don't believe there's any way to blur content behind the element... — Niet the Dark Absol, Jul 25 '16 at 18:32
`backdrop-filter`, but almost no browser support at the moment. — gcampbell, Jul 25 '16 at 18:33
You can copy the dynamic content into a new element, with a [clipping mask](http://www.w3schools.com/cssref/pr_pos_clip.asp), and then blur the contents. — Jeremy Blalock, Jul 25 '16 at 18:36
As of 2019, Chrome, Edge, Safari and Opera are already supporting `backdrop-filter`. — Pedro Estevão, Aug 20 '19 at 18:44

score 3 · Answer 1 · edited May 23 '17 at 12:22

Read this post https://stackoverflow.com/a/19688466/1663572 and related link http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

The solution uses this steps.

Render the HTML

Duplicate the content area and convert it to canvas.

Move the Canvas to the Header part

Sync the scroll of the content with the canvas in the header

Down on the page is an example (the narrow one). There is some missing image or something else and it is a bit spilled but try scrolling. But I'm not sure about frequency of changes of the content you were mentioning. This could be causing serious performance issues. But try it.

I don't think of any other option to achieve very comlicated think you want.

score 2 · Answer 2 · answered Jul 25 '16 at 18:55

If you are loading in an external image, then could you load it into an svg container as a background and apply an feGaussianBlur filter? Not sure how much control over the markup you have.

A w3 Schools primer on the blur:

http://www.w3schools.com/svg/svg_fegaussianblur.asp

A jsfiddle ( not mine ):

https://jsfiddle.net/jamygolden/yUG5U/2/

Sample markup:

<svg id="svg-image-blur">
    <image x="0" y="0" id="svg-image" width="300" height="200" xlink:href="http://path/to.your/image.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS:

#svg-image-blur { height: 200px; width: 300px; }
#svg-image:hover { filter:url(#blur-effect-1); }

score 2 · Answer 3 · answered Nov 29 '19 at 06:41

2

Use backdrop-filter, it is now supported by many browsers:

backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);

answered Nov 29 '19 at 06:41

Marton

247
2
11

underrated and perfect! – gillall Jan 06 '21 at 15:35

score 0 · Answer 4 · answered Jul 25 '16 at 18:33

0

Would css blur work?

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

answered Jul 25 '16 at 18:33

Jacob J

193
4
15

Nope, it's about blurring stuff behind. – gcampbell Jul 25 '16 at 18:35

How can I blur the dynamic contents behind a div?

4 Answers4