jQuery Plugin For Creating Blurred Background Image - Blurr

File Size: 2.55 MB
Views Total: 2801
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Creating Blurred Background Image - Blurr

Blurr is a jQuery plugin that takes advantage of SVG filter to create modern blurred images for containers' backgrounds.

How to use it:

1. Load the necessary jQuery library and the jQuery blurr plugin at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/jquery.blurr.js"></script>

2. Insert an DIV element in your web page and use data-href attribute to specify the source of your background image.

<div id="demo">
  <div data-href="demo.jpg">
      Text goes here

3. Options can be passed via data-OPTIONS attributes or JavaScript. For data attributes, append the option name to data-, as in data-sharpness="20".

<div data-href="demo.jpg" data-sharpness="20">

4. Initialize the plugin.

$(document).ready(function() {
$('#demo > div').blurr();

5. All the options available.

  • height: 300: Height, in pixels of this blurred div.
  • sharpness: 40: Sharpness, as a number between 0-100. 100 is very sharp, 0 is extremely blurry
  • offsetX: 0: The x (left - right) offset of the image
  • offsetY: 0: The y (top - bottom) offset of the image
  • callback: null: Callback to be called after the blur has been rendered. Recieves the following arguments (href, offsetX, offsetY, sharpness)

This awesome jQuery plugin is developed by tomhallam. For more Advanced Usages, please check the demo page or visit the official website.