Skip to content
Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters
Branch: master
Clone or download
Latest commit 89e3021 Apr 15, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information. Added coma. Apr 15, 2016
Vague.js bump new release Jan 8, 2015
bower.json closes #19 Jan 11, 2015
img.jpg layout update Jun 13, 2013
index.html new beta version May 2, 2014
package.json Update package.json Jan 8, 2015
style.css Use protocol-relative URL to load resources Dec 14, 2014


Vague.js: A jQuery plugin for blurring HTML elements via SVG filters.

Browser Support


Check the demos here on GitHub Pages and on Codepen.


jQuery JavaScript Library


bower install vague.js --save


var vague = $('#yourelement').Vague({
	intensity:      3,      // Blur Intensity
	forceSVGUrl:    false,   // Force absolute path to the SVG filter,
	// default animation options
    animationOptions: {
      duration: 1000,
      easing: 'linear' // here you can use also custom jQuery easing functions


API (Public methods)

  • blur : Apply the SVG filter to the element selected.
  • unblur : Hide the SVG filter from the element selected.
  • animate( newBlurIntensity, animationOptions ) : Animate the blur intensity to any new value.
  // here you can use the normal jQuery animation options
    easing: 'linear'
	console.log('Animation finished!');
  • destroy : remove the blur effect and the SVG filter from the DOM.


  • The animate method is part of the plugin but it's not recommended, it can be really slow due to the many GPU resources needed to render the blur effect on the pages
  • It is not supported in the Opera browser as SVG filters over elements are not supported
  • Not supported in IE10/IE11 ( because IE still sucks )



  • merged: patch 16 - 17


  • plugin code refactoring and micro optimizations
  • added: animate method
You can’t perform that action at this time.