Create Beautiful Gradient Transitions with Granim.js

By . in Toolkit. Updated on .

Web design is full of beauty and pleasing interface design. Some features are functional while others are just for show. Gradient transitions are solely for show but they pack quite a punch!

Read Also:  Understanding CSS3 Circular and Elliptical Gradients

With Granim.js, you can build custom full-color gradient transitions that look smooth and mesh nicely with any website.

You can find a bunch of custom examples on the main examples page with many different styles from simple transitions to more complex animations using background images.

Granim is the only JS library I know tackling gradient transitions. This is a question I’ve always wondered about and never really found a great answer. Granim is the perfect solution and it’s built on vanilla JavaScript, so it can run alongside jQuery or any other JS library.

Just drop the granim.js file into your page to get started. You can either download a copy from GitHub or host one from a live CDN.

Here’s a basic code sample from the GitHub repo:

<!-- Create a canvas element -->
<canvas id="granim-canvas"></canvas>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

Things can get a lot more complicated than this so you really should dig into the examples to learn more. You’ll find code snippets under each example so you can create gradient transitions for image backgrounds and even image masks.

The image masks can be used for a logo, for instance a PNG image, which gets hidden behind a gradient. This lets you create a JS-animated logo where the gradient slowly transitions throughout the text.

granim demo

Note this example takes a lot of JS/CSS code so it’s not a simple implementation.

But the more you practice with Granim the easier it’ll be to setup and customize. And with this being the only true gradient transition library online it’s the absolute best solution for any project.

The library is still updated semi-frequently so you can check the issues tab for more info.

It’s a pretty small library so there aren’t too many things to go wrong or need updating. This is what makes Granim.js a reliable solution for any site small or large.

To download a copy visit the releases page on GitHub or grab a copy of the .js file directly from cdnjs. And to view the source on a live example take a peek at this CodePen demo created by Jonathan Schneider.

Read Also:  CSS Gradient Border Colors

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail