Blur.js

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

Usage

$('.target').blurjs({
    source: 'body',
    radius: 7,
    overlay: 'rgba(255,255,255,0.4)'
});

Defaults

$('.target').blurjs({
    source: 'body',     //Background to blur
    radius: 5,          //Blur Radius
    overlay: '',        //Overlay Color, follow CSS3's rgba() syntax
    offset: {           //Pixel offset of background-position
        x: 0,
        y: 0
    },
    optClass: '',                   //Class to add to all affected elements
    cache: false,                   //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.
    cacheKeyPrefix: 'blurjs-',      //Prefix to the keyname in the localStorage object
    draggable: false                //Only used if jQuery UI is present. Will change background-position to fixed
});

Licensing

MIT