Add CSS Blur with this LESS mixin

How am I knowing about this now?

It looks like CSS filters have been out there for while, however since then not much has changed. The browser support is poor but since it's so easy to use, it might be worth it.

CSS filter

filter: blur(2px)

How does it work?

If you ever used Photoshop filters this will sound familiar: Gaussian blur.

This filter accepts one parameter, the radius. We'll use pixels, the larger number more blur.
Here's an example (2px) that by the time of this post this should work on Chrome, Safari and Opera.

kitten-placeholder
kitten-placeholder

Alright, I know what are you thinking: Why the heck do I need this?

Check out this Demo and you'll understand 😉

Want more filters?

Check out Mozilla's MDN article about CSS Filters

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*