How to blur arbitrary area on web page?

Question

Is there any feasible solution to blur any arbitrary areas on web page (include but not limited to image, element)?

Just like this, or many blurred popovers on iOS:

Might be helpful in your search: http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — Waxi, Apr 17 '17 at 13:33
You just need to get random numbers for the x and y (top, left) position of your blurred area and then apply the CSS `filter: blur()` to the element occupying that area. http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — Scott Marcus, Apr 17 '17 at 13:34
Blurring random/dynamic areas underlying the popup maybe not possible in CSS and HTML. But blurring the whole page may be possible, Check this (https://jsfiddle.net/jo_Geek/1t1c6kpp/), scroll to the bottom and click the button to show the alert. — Jones Joseph, Apr 17 '17 at 13:37
@ScottMarcus The area is blurred, but not transparent. Tried: https://i.stack.imgur.com/czC0b.png — Vej, Apr 17 '17 at 13:41
You can just also apply the `opacity:` CSS property to be able to see through it. If you look at the Pen that is linked to via the link I supplied, you will see the image is blurred and semi-transparent. — Scott Marcus, Apr 17 '17 at 13:43
@ScottMarcus the box itself is blurred, not the content it covers. https://i.stack.imgur.com/DQsVm.png — Vej, Apr 17 '17 at 13:47

score 2 · Accepted Answer · edited May 23 '17 at 11:33

You can use the svg solution like here or canvas solution like here but in the near future we will make it using just css, the webkit feature backdrop-filter works only on safari at now. Try the snippet on safari to see how it works.

body{
    margin:0px;
    }

.container{
    position:relative;
    height:100vh;
    width:100%;
    background-image:url(http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg);
    background-size: cover;
    background-position:center center;
    }
    
.blur{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height: 100px;
    -webkit-backdrop-filter: blur(5px);
    }

<div class="container">

    <div class="blur"></div>

</div>

Thanks! Tried: https://i.stack.imgur.com/OtcBW.png It did work on Safari on macOS. Any solutions on Chrome & Internet Explorer? — Vej, Apr 17 '17 at 14:13

How to blur arbitrary area on web page?

1 Answers1