Create Dynamic Abstract Web Backgrounds With color4bg.js

color4bg.js is an easy-to-use JavaScript library that helps developers create dynamic, gradient, abstract background patterns that are popular on modern websites, especially those focused on AI and SaaS.

With just a few lines of code, you can implement a variety of background styles, including:

Abstract Shape

Aesthetic Fluid

Blur Dot

Blur Gradient

Triangles Mosaic

Random Cubes

Wavy Waves

Big Blob

How to use it:

1. Download the package and import the specific background module you need.

import { AbstractShapeBg } from "./build/jsm/AbstractShapeBg.module.js"
import { AestheticFluidBg } from "./build/jsm/AestheticFluidBg.module.js"
import { BigBlobBg } from "./build/jsm/BigBlobBg.module.js"
import { BlurDotBg } from "./build/jsm/BlurDotBg.module.js"
import { BlurGradientBg } from "./build/jsm/BlurGradientBg.module.js"
import { RandomCubesBg } from "./build/jsm/RandomCubesBg.module.js"
import { TrianglesMosaicBg } from "./build/jsm/TrianglesMosaicBg.module.js"
import { WavyWavesBg } from "./build/jsm/WavyWavesBg.module.js"

2. Create a new instance and customize the background with the following options.

let colorbg = new AestheticFluidBg({
    // The DOM element where the background should be attached
    dom: "hero",  
    // Up to 6 colors
    colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],  
    // Ensures consistent pattern generation
    seed: 1000,  
    // Whether the background should animate continuously
    loop: true 
});

See Also:

• 40+ JavaScript & CSS Snippets For Modern AI App Design