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)Code language: HTTP (http)

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

Leave a Reply

Your email address will not be published. Required fields are marked *