Cross-Browser CSS Image Blur
Cross-Browser CSS Image Blur
With the so called ‘blur’ CSS filter you can create a Photoshop like blur effect using nothing but CSS. As always the current browser support for this filter is not 100% but we’ll be able to work around most of the issues. Let us start by applying the normal CSS filter as specified in the W3C specification.
In our simple example HTML we have an image we want to blur:
<img src="img/testimage.png" id="blurred"></img>
Now we can apply the effect filter using CSS:
#blurred {
filter: blur(5px);
}
As of Januar 2016 only Firefox and Microsoft Edge support the unprefixed filter so we’ll need to add the webkit prefix to get support in other browsers.
#blurred {
filter: blur(5px);
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
}
Now the blur filter will work in Chrome and Safari as well.
To get the same effect in Internet Explorer (up to version 9) we can use a DXfilter in our CSS:
#blurred {
filter: blur(5px);
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
}
Unfortunately Microsoft removed the DXfilter in Internet Explorer 9+ so if you need the blur filter there as well your only choice is to use a Polyfill like StackBlur.
Picture by Kevin Dooley