Skip to main content

5+ Pixelate and Image Blur jQuery Plugins

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

In this post we are sharing with you 5+ Pixelate and Image Blur jQuery Plugins. They are mostly lightweight and easy to use with your images to get your that “blurred lines” effect. Check’em out!

1. pixelate.js

Is a simple library and jQuery plugin to pixelate any set of images and optionally reveal them on hover.

Pixelate-JS1.jpg
SourceDemo

2. Vague.js

An experimental script that allows you to blur any kind of html element thanks to the SVG filters

Vague-JS.jpg
SourceDemo

3. Foggy

A jQuery plugin for blurring page elements. It supports IE (8 and up), Firefox, Safari and Chrome.

Foggy.jpg
Source + Demo

4. blur.js

A jQuery plugin that produces psuedo-transparent blurred elements over other elements

blur-JS.jpg
SourceDemo

5. Hoverizr

A really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images.

Hoverizr.jpg
Source + Demo

6. StackBlur

A fast, almost Gaussian blur for Canvas by Mario Klingemann, Quasimondo.

StackBlur.jpg
Source + Demo

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.