HTML CSS blur effect

I was trying to blur out a bit of content on a page I was working on in Ruby on Rails, and I was having a problem getting HAML and SASS to play nice and stop breaking my filter in Firefox. Luckily I was able to figure it out; turns out to make Mozilla Firefox blur something, you need to use the SVG filter embedded in the url definition. Note: this is not very performant in Firefox, so try to use it sparingly, especially on pages with scrolling.

.blur {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=''><filter id='blurfilter' x='0' y='0'><feGaussianBlur in='SourceGraphic' stdDeviation='3'></feGaussianBlur></filter></svg>#blurfilter");
  -webkit-filter: blur(4px);
  filter: blur(4px);

just include this CSS class, and then tag any element with it. If the blur is too much (or not enough) just change the blur([number]px) and the stdDeviation='[number]’ fields to whatever you like.

HTML CSS blur effect

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s