gradientMe() - uses jQuery + ColorThief

gradient-me.js

(function($) {

	$.fn.gradientMe = function(opacity) {

		if (typeof opacity == 'undefined')
			opacity = 0.2;

		if (typeof ColorThief != 'function') {
			console.log('gradientMe(): ColorThief.js is missing!');
			return;
		}

		function componentToHex(c) {
			var hex = c.toString(16);
			return hex.length == 1 ? "0" + hex : hex;
		}

		return this.each(function() {

			var $t = $(this);

			if (!$(this).find('img').length)
				return;

			var img = new Image();

			img.src = $(this).find('img').attr('src');

			$(this).find('img').on('load', function() {
				var ct       = new ColorThief();
				var domColor = ct.getPalette(img, 5);

				$t.css({
					'background': 'rgb(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ')',
					'background': '-moz-linear-gradient(-45deg, rgba(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ',' + opacity + ') 0%, rgba(' + domColor[1][0] + ',' + domColor[1][1] + ',' + domColor[1][2] + ',' + opacity + ') 100%)',
					'background': '-webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ',' + opacity + ')), color-stop(100%,rgba(' + domColor[1][0] + ',' + domColor[1][1] + ',' + domColor[1][2] + ',' + opacity + ')))',
					'background': '-webkit-linear-gradient(-45deg, rgba(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ',' + opacity + ') 0%,rgba(' + domColor[1][0] + ',' + domColor[1][1] + ',' + domColor[1][2] + ',' + opacity + ') 100%)',
					'background': '-o-linear-gradient(-45deg, rgba(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ',' + opacity + ') 0%,rgba(' + domColor[1][0] + ',' + domColor[1][1] + ',' + domColor[1][2] + ',' + opacity + ') 100%)',
					'background': '-ms-linear-gradient(-45deg, rgba(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ',' + opacity + ') 0%,rgba(' + domColor[1][0] + ',' + domColor[1][1] + ',' + domColor[1][2] + ',' + opacity + ') 100%)',
					'background': 'linear-gradient(135deg, rgba(' + domColor[0][0] + ',' + domColor[0][1] + ',' + domColor[0][2] + ',' + opacity + ') 0%,rgba(' + domColor[1][0] + ',' + domColor[1][1] + ',' + domColor[1][2] + ',' + opacity + ') 100%)',
					'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#' + componentToHex(domColor[0][0]) + componentToHex(domColor[0][1]) + componentToHex(domColor[0][2]) + '\', endColorstr=\'#' + componentToHex(domColor[1][0]) + componentToHex(domColor[1][1]) + componentToHex(domColor[1][2]) + '\',GradientType=1 )',
				});
			});
		});
	};
}(jQuery));