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
You can’t perform that action at this time.