Create Configurable Gradient Overlay With jQuery - Darkener

File Size: 9.97 KB
Views Total: 749
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Configurable Gradient Overlay With jQuery - Darkener

Darkener is a small jQuery plugin which applies configurable CSS gradient overlays to any containers you specify.

The goal of this plugin is to create fancy gradient effects on background images. CSS mix-blend-mode is supported as well.

See Also:

How to use it:

1. Load the minified version of the darkener plugin after loading jQuery library.

<script src="" 
<script src="js/jquery.darkener.min.js"></script>

2. Call the function on a specific container and done.

<div class="image" style="background-image: url(">



3. Customize the gradient effect with the following options.


  // the css property top|left|right|bottom. defines from what side the overlay stretches. any other value defaults to 'top'
  align: 'top', 

  // css value for width|height - defines how much of the area is covered by the overlay in total
  size: '50%', 

  // the color on the strechted side
  colorStart: 'rgba(0,0,0,0)', 

  // the color on the border (of the image)
  colorEnd: 'rgba(0,0,0,0.8)', 

  // overall opacity
  opacity: '1'


4. Set the CSS mix-blend-mode property:


  // 'difference', 'multiply', 'hard-light'
  mixBlendMode: 'normal'


5. You can also apply multiple gradient effects to a container.

  align: 'left',
  colorEnd: 'green',
  size: '60%',
  mixBlendMode: 'hue',
  opacity: '0.5'
  align: 'top',
  colorStart: 'blue',
  colorEnd: 'rgba(0,0,255,0.1)',
  size: '70%',
  mixBlendMode: 'color'
  align: 'bottom',
  colorStart: 'red',
  colorEnd: 'red',
  size: '70%',
  mixBlendMode: 'color'



  • v1.0.0


  • some formatting


  • move css-formatting on elem to the bottom

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