Skip to content

Instantly share code, notes, and snippets.

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.


<!--[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]-->
<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>
<!-- 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 -->
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<div class="blur"></div>
<img class="offset" src=''>
<!-- SVG filter for Firefox -->
<svg version="1.1" xmlns="" xmlns:xlink="">
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
<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"/>
<feMergeNode in="SourceGraphic"/>
// !Modernizr.svgfilters returns a false positive in IE11
// As a result, we need to also try to sniff out Firefox via InstallTrigger
// See:
// See also:
!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
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(;
background-repeat: repeat; /* Repeat for browsers that don't support background-size */
background-position: top center;
background-size: cover;
display: block;
width: 100%;
overflow: hidden; /* Clip any overflow created by the blur effect */
margin: 0 auto;
padding: 0;
display: block;
background: #333;
width: 100%;
display: block;
margin-top: -18em;
margin-right: 5%;
box-shadow: 0 0 3px #333;
position: relative;
z-index: 2;
max-width: 20em;
padding: 1em;
background: #fafafa;

This comment has been minimized.

Copy link

@maurocolella maurocolella commented Jan 9, 2015

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


This comment has been minimized.

Copy link

@z3r0gravity z3r0gravity commented Nov 9, 2016

This is not a cross-browser solution.
Edge on the left side and IE11 on the right

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment