Grade.js: Easy to Use, Neat Results
There are different options for the integration into your project. You can download the 104kb large script, and upload it onto your project. You could also install it via npm, or use the given CDN link.
Using it is very easy. First, you implement the script and initialize it. Like this, for example:
A NodeList of all your image containers (Or a single Node).
The library will locate an <img /> within each
container to create the gradient from.
Then, place a container div around the image you want to frame. This container is marked with the class “gradient-wrap”.
That can look like this:
<!--the gradients will be applied to these outer divs, as background-images-->
<img src="./samples/finding-dory.jpg" alt="" />
That’s it. From now on, all of the page’s images that are in a container with the class “gradient-wrap”, will be equipped with a frame like this one: