NeatLinear Gradients

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

  1. angle — 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 NeatLinear gradients below.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatLinear({
    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 NeatLinear({
    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 NeatLinear({
    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.

A Huge Heading

Gradient Colors

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

This time we are rotating the gradient by setting the updateVariable to true.

The gradient is the same size as the container because we haven't applied any classes to animate it in a particular direction.

A Huge Heading

Gradient Colors

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

Here, we are supplying an array of an array of colors to the colors property. This tells Neat:Linear that we want to smoothly transition from one color set to another.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatLinear({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        angle: 60,
        updateVariable: true
    },
    classes: 
});
gradientObject.animateGradient();

In this case, we are rotating the linear gradient and transitioning its colors from one set to another at the same time.