NeatBricks

You can change three parameters for a NeatBricks gradient to control its appearance.

  1. baseSize — to specify how large each brick or block of the gradient should be.

  2. quadColors — to specify if the brick rows should alternate in colors.

  3. brickOutline — to specify each brick's outline color.

A Huge Heading

Gradient Colors

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

This gradient pattern uses the default NeatBricks styleOptions values.

A Huge Heading

Gradient Colors

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

Here, I have set the baseSize to 60px which is smaller than the default value 100px.

A Huge Heading

Gradient Colors

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

Setting quadColors to true allows you to pass an array of four colors to create the bricks.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatBricks({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        brickOutline: '#FFF'
    },
    classes: 
});
gradientObject.animateGradient();

The brickOutline is black by default. Here, we change it to white.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatBricks({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        quadColors: true,
        brickOutline: '#FFF'
    },
    classes: 
});
gradientObject.animateGradient();

This configuration allows the brick pattern to use four colors and a white outline.

A Huge Heading

Gradient Colors

let gradientObject =  new NeatBricks({
    element: boxElems[0],
    colors: ,
    styleOptions: {
        quadColors: true,
        brickOutline: '#F90'
    },
    classes: 
});
gradientObject.animateGradient();

This configuration allows you to create bricks with four different colors and an orange outline.