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:

• Online CSS Gradient Generator

How to use it:

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<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(https://source.unsplash.com/1600x1200/?girl)">
</div>

$(function(){

  $('.image').darkener();

});

3. Customize the gradient effect with the following options.

$('.image').darkener({

  // 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:

$('.image').darkener({

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

});

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

$('.image').darkener({
  align: 'left',
  colorEnd: 'green',
  size: '60%',
  mixBlendMode: 'hue',
  opacity: '0.5'
}).darkener({
  align: 'top',
  colorStart: 'blue',
  colorEnd: 'rgba(0,0,255,0.1)',
  size: '70%',
  mixBlendMode: 'color'
}).darkener({
  align: 'bottom',
  colorStart: 'red',
  colorEnd: 'red',
  size: '70%',
  mixBlendMode: 'color'
});

Changelog:

2018-12-18

• v1.0.0

2018-12-12

• some formatting

2018-12-11

• 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.