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='http://www.w3.org/2000/svg'><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.

Advertisements
HTML CSS blur effect

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s