Create Fluid Gradient Animations With JavaScript – NeatGradients.js

NeatGradients is a JavaScript library that helps you generate beautiful animated background patterns using CSS gradients, similar to those seen on many modern AI and SaaS websites.

It’s perfect for adding visual interest to hero sections, headers, or any part of your website that needs a vibrant touch.

Under the hood, the library uses CSS custom properties (variables) to animate the gradients and update these variables using JavaScript’s requestAnimationFrame API.

Features:

• Generate fluid and interactive gradient animations
• Create various patterns like linear gradients, abstract shapes, zigzags, polka dots, and more
• Customize colors, sizes, and animation speeds

How to use it:

1. Download the package and include the core JavaScript file in your HTML document:

<script src="neat-gradient.js"></script>

2. Create animated linear gradients with multiple colors using the NeatLinear method.

Live Demo

let gradientObject =  new NeatLinear({
    // target element
    element: myElement,
    // up to six colors
    colors: ['#b61a62', '#1ab76e'],
    styleOptions: {
      angle: 30,
      // rotate the gradient
      updateVariable: true, 
    },
    // Helper classes:
    // nbg-move-tb, nbg-move-lr, nbg-move-rl, and nbg-move-bt
    classes: '' // Helper classes
});
gradientObject.animateGradient();

3. For more complex backgrounds, use the NeatAbstract method instead:

Live Demo

let gradientObject =  new NeatAbstract({
    // target element
    element: myElement,
    // up to six colors
    colors: ['#b61a62', '#1ab76e'],
    styleOptions: {
      angle: 30,
      // rotate the gradient
      updateVariable: true, 
      centers: [0, 0, -30, 30, 100, 100],
    },
    // Helper classes:
    // nbg-move-tb, nbg-move-lr, nbg-move-rl, and nbg-move-bt
    classes: '' // Helper classes
});
gradientObject.animateGradient();

4. Create eye-catching zigzag patterns using the NeatZigZag method:

Live Demo

let gradientObject =  new NeatZigZag({
    // target element
    element: myElement,
    // up to six colors
    colors: ['#b61a62', '#1ab76e'],
    styleOptions: {
      angle: 30,
      // rotate the gradient
      updateVariable: true, 
      baseSize: 50,
      translucent: true,
      bandWidth: 5,
      triColor: true
      bgPosMultipliers: 2
      // uneven, squares, square-stripes, square-diagonals, pinwheel, and arrows
      variant: 'arrows'
    },
    // Helper classes:
    // nbg-move-tb, nbg-move-lr, nbg-move-rl, and nbg-move-bt
    classes: 'nbg-move-rl' 
});
gradientObject.animateGradient();

5. For a fun, retro look, try the NeatPolkaDots method:

Live Demo

let gradientObject =  new NeatPolkaDots({
    // target element
    element: myElement,
    // up to six colors
    colors: ['#b61a62', '#1ab76e'],
    styleOptions: {
      angle: 30,
      // rotate the gradient
      updateVariable: true, 
      baseSize: 50,
      bandWidth: 5,
      triColor: true
      bgPosMultipliers: [0, 0, 0, -0.5],
      radii: [30, 60], 
      rings: true,
    },
    // Helper classes:
    // nbg-move-tb, nbg-move-lr, nbg-move-rl, and nbg-move-bt
    classes: 'nbg-move-rl' 
});
gradientObject.animateGradient();

6. Generate animated patterns with alternating upward and downward-facing triangles using the NeatUpDownTriangles method:

Live Demo

let gradientObject =  new NeatUpDownTriangles({
    // target element
    element: myElement,
    // up to six colors
    colors: ['#b61a62', '#1ab76e'],
    styleOptions: {
      angle: [-60, 60, 120, 240],
      updateVariable: true, 
      baseSize: 100,
      triangleSize: [20, 20],
      triColor: false,
      bgPosMultipliers: [0, 0, 0, -0.5],
      // opposite-stripes, aligned, and star
      variant: 'star',
      seamless: false,
      ratio: 1,
    },
    // Helper classes:
    // nbg-move-tb, nbg-move-lr, nbg-move-rl, and nbg-move-bt
    classes: 'nbg-move-rl' 
});
gradientObject.animateGradient();

7. You can also create gradient patterns resembling a brick wall using the NeatBricks method:

Live Demo

let gradientObject =  new NeatBricks({
    // target element
    element: myElement,
    // up to six colors
    colors: ['#b61a62', '#1ab76e'],
    styleOptions: {
      baseSize: 60,
      quadColors: true,
      brickOutline: '#FFF',
    },
    // Helper classes:
    // nbg-move-tb, nbg-move-lr, nbg-move-rl, and nbg-move-bt
    classes: 'nbg-move-rl' 
});
gradientObject.animateGradient();

8. Change the colors of your gradient at any time:

gradientObject.colors = ['#b8f475', '#97ee33', ...];

9. Adjust the animation duration to control how fast the pattern moves:

gradientObject.animationDuration = 100;

Changelog:

11/02/2024

• Added the Option ‘overlay’ to Let Users Add an Overlay to the Gradient.

10/27/2024

• Added a wrapper element for better handling of overflow.