JavaScript Library To Generate Gradients From Dominant Colors In An Image – Grade.js

Preview:

Description:

Grade.js is a JavaScript library that extracts the top 2 dominant colors from your images and then generates gradients for further use.

How to use it:

Download and include the core JavaScript file in the web project.

<script src="dist/grade.js"></script>

Wrap your image into a container named ‘gradient-wrap’.

<div class="gradient-wrap">
  <img src="1.jpg">
</div>

The JavaScript to extract the colors from the image and apply the colors as gradients to the background of its parent container.

Grade(document.querySelectorAll('.gradient-wrap'))