While searching around Github earlier I came across Grade. Something so simple but so beautiful at the same time. This is an absolute gem. Grade is super lightweight and has no dependancies.

As you can expect, creating fluid and matching themes during web design can get a little tricky, especially when it comes to user submitted content. I can see this helping with this particular problem.

From what I can see in the read me, its not hard to use at all either.

It does also offer the use of the CDN, the following will help you implement the following example easily.

https://unpkg.com/grade-js/docs/dist/grade.js

All you need to do is:

  1. include the javascript file.
  2. come up with a name for the class you want to hold these gradients.
  3. Apply these gradients to the wrappers (Where you want the gradients to show)
  4. Include this simple piece of javascript.

This would all look something like the following

<div class="gradient-wrap">
    <img src="./path/to-image.jpg" />
</div>

<script src="../path-to/grade.js"></script>
<script type="text/javascript">
    window.addEventListener('load', function(){
        Grade(document.querySelectorAll('.gradient-wrap'));
    });
</script>

And here is this in use.

Grade showing off a complementary gradient for a message in a bottle

One requirement with this library however is that the images need to be hosted on the same domain due to CORS. This could be a problem with systems such as Gravatar.

If you click here this will take you to Ben Howdle (The Author) examples, alternatively to learn more about the library and what other features it has take a look at its Github Repo

It makes me wonder if something similar could be done with text and contrasting colours. This would be an interesting concept. Imagine being able to overlay text with a contrasting colour over an image without having to worry what colour it was.

I seriously suggest you go an take this one out for a spin, you never know you might be happy with the results.

Thank you for reading!