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