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.

Don’t struggle alone with projects

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

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
Related post:  pagePiling.js - Create a scrolling pile of sections

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

Download Gradientify

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close