Create Animated Gradient Background With JavaScript – gradientify.js

gradientify.js is a small JavaScript plugin which makes use of plain HTML and CSS to create an animated gradient background for any container element.

How to use it:

Import the JavaScript file ‘gradientify.js’ into the html file.

<script src="build/gradientify.js"></script>

Create a new Gradientify object.

new Gradientify()

Specify the container element where you want to apply the animated gradient background.

new Gradientify({
    element: document.body
})

Define an array of gradients using CSS linear-gradient() function.

new Gradientify({
    element: document.body,
    gradients: [
      `linear-gradient(60deg, rgb(255, 0, 0), rgb(0, 0, 255))`,
      `linear-gradient(10deg, rgb(25, 123, 23), #ff22af)`,
      `radial-gradient(rgb(25, 123, 223), red)` // All valid CSS gradients are supported
    ]
})

Set the position of the gradient background.

new Gradientify({
    element: document.body,
    gradients: [
      `linear-gradient(60deg, rgb(255, 0, 0), rgb(0, 0, 255))`,
      `linear-gradient(10deg, rgb(25, 123, 23), #ff22af)`,
      `radial-gradient(rgb(25, 123, 223), red)` // All valid CSS gradients are supported
    ],
    fixed: false
})

Config the transition effect of the gradient background.

new Gradientify({
    element: document.body,
    gradients: [
      `linear-gradient(60deg, rgb(255, 0, 0), rgb(0, 0, 255))`,
      `linear-gradient(10deg, rgb(25, 123, 23), #ff22af)`,
      `radial-gradient(rgb(25, 123, 223), red)` // All valid CSS gradients are supported
    ],
    fixed: false,
    delay: 0, 
    interval: 5000
})

Changelog:

07/01/2018

• Fix RGB gradient colors