jQuery.BlackAndWhite – Convert coloured images to B&W

This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers. There are three options to choose from – normal, hover effect inverted and ajax content.

You can easily implement it in your projects and achive classy look of your images.

jQuery.BlackAndWhite jQuery.BlackAndWhite

Demo Download



 1 Include the plug into the page:

<script src="js/jQuery.BlackAndWhite.js"></script>

2 Set the image wrappers using the css:

.bwWrapper {

3 Initialize the plug in on window load (no $(document).ready()):

hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// for the images with a fluid width and height
// to invert the hover effect
invertHoverEffect: false,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
onImageReady:function(img) {
// this callback gets executed anytime an image is converted

Plugin Showcase


Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

You may also like...

1 Response

  1. teocomi says:

    Great work!

Leave a Reply

Your email address will not be published. Required fields are marked *