Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Erin Bell.

Cross-browser HTML Blur Filter

I sorted through the cross-browser blur filter complexities to come up with –I think– a pretty solid solution. Basically uses CSS3 filters for all modern browsers ('blur' value for all but Firefox, which needs discrete SVG), uses MS filters for IE 9 and older, and StackBlurCanvas script for IE10+.

A Pen by Erin Bell on CodePen.

License.

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Cross-Browser Blur Filter with CSS and StackBlurCanvas</title>
</head>
<body>
<!-- Scripts: JQuery, Modernizr (+cssfilters), Resig's Class, StackBlurCanvas. This Pen example may not render the blur effect in IE10+ but I assure you if you re-assemble sensibly in a proper environment, it will work. Note that you need to use the Paul Irish IE conditional class trick. Here are some working demo files http://cl.ly/1N1l3Q1i0f2b -->
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<script src="http://erinbell.org/BLUR/demo/javascript/modernizr.js" type="text/javascript"></script>
<script src="http://erinbell.org/BLUR/demo/javascript/lib/class.js" type="text/javascript"></script>
<script src="http://erinbell.org/BLUR/demo/javascript/controller/stackblur.min.js" type="text/javascript"></script>
<figure>
<div class="blur"></div>
<img class="offset" src='http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg'>
</figure>
<!-- SVG filter for Firefox -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="#000000"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
</body>
</html>
// !Modernizr.svgfilters returns a false positive in IE11
// As a result, we need to also try to sniff out Firefox via InstallTrigger
// See: http://jsfiddle.net/9zxvE/383/
// See also: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
if(
!Modernizr.cssfilters && // Not a browser with CSS filter support
!( $('html').hasClass('lt-ie9') ) && // Not an old version of IE (which support MS filters)
!(typeof InstallTrigger !== 'undefined') // Not Firefox (which supports SVG filters)
){
var blur = new Blur({
el : document.querySelector('.blur'),
path : 'images/meatloaf.jpg',
radius : 5,
fullscreen : true
});
}
.blur{
filter: blur(5px); /* Someday, sigh ... */
-webkit-filter: blur(5px); /* Prefixed CSS3 blur filters */
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: url(#blur); /* Firefox needs SVG */
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); /* IE lte 9 */
background-image: url(http://f.cl.ly/items/1J0T0L3q1h1a0c3Q0W0I/meatloaf.jpg);
background-repeat: repeat; /* Repeat for browsers that don't support background-size */
background-position: top center;
background-size: cover;
display: block;
height:30em;
width: 100%;
}
figure{
overflow: hidden; /* Clip any overflow created by the blur effect */
margin: 0 auto;
padding: 0;
display: block;
background: #333;
width: 100%;
height:30em;
}
.offset{
float:right;
display: block;
margin-top: -18em;
margin-right: 5%;
box-shadow: 0 0 3px #333;
position: relative;
z-index: 2;
width:90%;
max-width: 20em;
height:15em;
padding: 1em;
background: #fafafa;
}
@maurocolella

This comment has been minimized.

Copy link

maurocolella commented Jan 9, 2015

Thank you for this "pen", but what about using SVG for IE10+?

http://caniuse.com/#feat=svg-filters

@moon-deer

This comment has been minimized.

Copy link

moon-deer commented Nov 9, 2016

This is not a cross-browser solution.
Edge on the left side and IE11 on the right
http://take.ms/ivROe

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.