Can you CSS Blur based on a gradient mask? - css

Question

Can you CSS Blur based on a gradient mask?
Something similar to this effect, http://www.imagemagick.org/Usage/mapping/#blur?

Answer 1

This can help you http://codepen.io/iamvdo/pen/xECmI
.effet{
width: 400px; height: 300px;
margin: 0 auto 50px auto;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
position: absolute;
}
.filtre--r{
-webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
-webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
-webkit-filter: blur(5px);
mask: url('#mask-radial');
filter: url('#filtre1');
}
.filtre--l{
-webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);
-webkit-mask: linear-gradient(black, transparent 30%, black);
-webkit-filter: blur(3px);
mask: url('#mask-linear');
filter: url('#filtre2');
}
.filtre:hover{
-webkit-mask: none;
-webkit-filter: none;
mask: none;
filter: none;
}
p{
text-align: center;
color: rgba(0,0,0,.6);
margin: 1em;
}
p a{
color: rgba(0,0,0,.6);
}
<p><strong>Radial</strong> progressive blur</p>
<div class="effet">
<img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
<img class="filtre filtre--r" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
</div>
<p><strong>Linear</strong> progressive blur</p>
<div class="effet">
<img src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="" />
<img class="filtre filtre--l" src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="" />
</div>
<p>Hover over images to see without blur</p>
<p>Next demo: iOS 7 background blur with CSS</p>
<svg height="0">
<defs>
<mask id="mask-radial">
<rect width="400" height="300" fill="url(#g1)"></rect>
<radialGradient id="g1" cx="50%" cy="50%" r="50%">
<stop stop-color="black" offset="50%"/>
<stop stop-color="white" offset="110%"/>
</radialGradient>
</mask>
<mask id="mask-linear">
<rect width="400" height="300" fill="url(#l1)"></rect>
<linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0%"/>
<stop stop-color="black" offset="30%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</mask>
<filter id="filtre1">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
<filter id="filtre2">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
</defs>
</svg>

Answer 2

[EDIT] As of October 2022, it is now possible in all the modern browsers.
Yes you can, but at the moment the backdrop blur is not supported on all the browsers.
Here is a simple example working on Chrome and Safari but not Firefox (because of the lack of backdrop-filter support).
https://codepen.io/antoniandre/pen/vYpWQXd?editors=0100
* {margin: 0}
body {
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2600&q=80");
background-size: cover;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
backdrop-filter: blur(20px);
mask: linear-gradient(transparent, black 60%);
transition: 1s;
}
&:hover:after {opacity: 1;}
}

Answer 3

You might nowadays simply use:
backdrop-filter: blur(4px)
All modern browsers except Firefox support it.