Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

jQuery Blend Modes

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

jQuery Blend Modes - Item for Sale


Ad: Bluehost hosting

Follow TwitterFoLlow Dribbble

Note: If you like this work, please rate it:)

The idea of jQuery Blend Modesplug-in is to blend two copy of same imagewith specified blend mode, this process give us an amazing effect without need to use any image editor. This plug-in include 15 blend modes:
  • colorBurn
  • colorDodge
  • exclusion
  • hardLight
  • hardMix
  • linearBurn
  • linearDodge
  • linearLight
  • multiply
  • negation
  • overlay
  • screen
  • softLight
  • substract
  • vividLight

How does it work!

This plug-in use the canvas element that introduced in HTML5, shortly it’s is a special element that can manipulate the graphics, so we can edit each pixel in an image, and with this power, we can easily apply the blend modes algorithm. Firstly the plug-in get two copy of an image and blend them with a chosen blend mode, the result of this process putted on a new canvas element, after the plug-in hide the original image, finally it append the generated canvas element before the hidden image, this steps give us an awesome result,and with this basic function we can make a new mouse hover feeling :)

It’s easy to use


Nice Docs:

This plugin come with a full documentation contain a simple implementation explain how to make the hover effects ..


  • Modern browser that support canvas element.
  • jQuery (we recommended the latest version)
  • Hosting (you can use your localhost)

Credits & Sources

© 2012 Mohieddine Abd-kader

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


21 October 11

Last Update:
17 January 12

Compatible Browsers:
IE9, Firefox, Safari, Opera, Chrome

Software Version:
HTML5, jQuery

Files Included:
JavaScript JS, HTML, CSS


15 modes, blend modes, canvas, html5, jQuery blend modes plug-in, javascript, jquery, photoshop, plug-in