JavaScript
Article
By Sam Deering

5+ Pixelate and Image Blur jQuery Plugins

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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

--ADVERTISEMENT--

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

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?