NeatAbstract Gradients

You can change two parameters for a NeatAbstract gradient to control its appearance.

  1. centers (Default: [0, 0, -30, 30, 100, 100]) — to specify the angle at which the library should render the gradient.

  2. updateVariable — to specify if the gradient should rotate.

A rotating linear gradient takes two colors as input. A normal linear gradient takes up to six colors as input.

If you specify a lower number of colors. The gradient will start cycling through them.

You can see some examples of animated NeatAbstract gradients below.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatAbstract({
    element: boxElems[0],
    colors: ,
    classes: 
});
gradientObject.animateGradient();

This is the default configuration where a linear gradient of up to 6 colors is drawn from top to bottom.

If you provide less than 6 colors, the library cycles through them in order until it has six.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatAbstract({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        angle: 90
    },
    classes: 
});
gradientObject.animateGradient();

Here, we set the angle to 90deg which draws the gradient from left ot right.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatAbstract({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        angle: 30
    },
    classes: 
});
gradientObject.animateGradient();

In this example, the background moves from bottom to top due to the nbg-move-bt class but the gradient is placed at a 30deg angle.