Grade.js: Library to Create Gradients in JavaScript

Grade.js is a library that can create gradients in JavaScript. It uses the two dominant colors of any given image on the page to create complementary gradients. 

Grade.js: Library to Create Gradients in JavaScript


Basically, relying on your supplied images, Grade.js can be used to create gradients in JavaScript with ease. It automatically detects the dominant colors of the supplied images. Thereafter, it generates the gradients accordingly.

Mode of Operation

To get Grade.js working, you just need to download the repo from GitHub.

Grade.js: Library to Create Gradients in JavaScript

Alternatively, you can choose to install it via npm:

npm install grade-js

If installing via npm, the usage is fairly straightforward:

import Grade from 'grade-js'

There are multiple ways to use Grade.js to create gradients in JavaScript. The recommended HTML structure is something like this:

<!--the gradients will be applied to these outer divs, as background-images-->

<div class="gradient-wrap">
<img src="./samples/sample-image.jpg" alt="Alt Text" />

<div class="gradient-wrap">
<img src="./samples/another-image.jpg" alt="Alt Text" />

Once you include Grade.js in your project, you can include it within a script tag as well:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22path%2Fto%2Fgrade.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

You can also choose to run Grade.js locally to test how to create gradients in JavaScript. In this case, be sure to run index.html in a web server. If you open index.html in a browser when running the library locally, you will get a security error. Any decent web server will suffice, including the standard WAMP architecture (for Windows users).


If you are looking to create gradients in JavaScript, Grade.js is a worthy and very useless library. It comes with an MIT License and is fully open source. More importantly, creating complementary gradients is a breeze with Grade.js and therefore, you should surely give this JavaScript library a spin.

Note that, however, attempting to use Grade.js with remote images (that is, images not hosted on the current domain) may not work unless the images in question allow for cross origin resource sharing. This is a cross-site security limitation that you should bear in mind. Other than that, for all practical purposes, Grade.js seems to be the ultimate library to help you create gradients in JavaScript.

Liked what you read?

Sign up for the Code Carbon Newsletter and receive weekly updates about new resources, tools as well as deals and discounts on awesome services.

One email per week; no spam, no nonsense; unsubscribe anytime.