Gradientify – jQuery plugin for CSS Gradient Transitions

Gradientify – jQuery plugin for CSS Gradient Transitions

Today’s quick design tips is a very simple jQuery plugin which provides beautiful CSS gradient transitions. Gradientify is very simple to implement and use as you do not need any special coding skills to add it to any website.

The plugin is based on a script created by Mike Byrne. By adding this plugin to your header or to a specific section you can spice up websites with bright vibrant gradient colours.

Have a look at this Codepen Demo to see the plugin in action:

See the Pen Gradientify Demo by Petia (@designify-me) on CodePen.

Here is a quick tip how to use it:

$('body').gradientify({
gradients: [
{ start: [49,76,172], stop: [242,159,191] },
{ start: [255,103,69], stop: [240,154,241] },
{ start: [33,229,241], stop: [235,236,117] }
]
});

You can adjust the gradients with the following parameters:

Name Description Required? Default
gradients An array of objects containing start and stop gradients in RGB values. required []
angle The gradient angle. The value is put directly in the CSS gradient definition. optional 0deg
fps Frames per second. The higher the value the transition will be smoother, but it affects the performance! optional 60
transition_time Transition time between gradients in seconds. optional 8

You can find a lovely and useful UI Gradient library here.

Download Gradientify

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *