Generate Random Abstract Backgrounds Using Vanilla JavaScript

Today we’re going to be using plain JavaScript and CSS to create some really cool abstract backgrounds.

These are the kind of images you can use in place of the background on your website or blog.

How to use it:

1. Create an empty container in which you want to generate random abstract backgrounds.

<div class="bg"></div>

2. The main function for the abstract background generator.

const generateBoxes = (limit, parent) => {
  parent.innerHTML = "";
  // override colors here
  const colors = [
    "#577590",
    "#43aa8b",
    "#90be6d",
    "#f9c74f",
    "#f8961e",
    "#f3722c",
    "#f94144"
  ];
  for (i = 0; i < limit; i++) {
    let box = document.createElement("div");
    box.classList.add("box");
    box.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
    box.style.height = `${Math.floor(Math.random() * 300 + 50)}px`;
    box.style.width = `${Math.floor(Math.random() * 300 + 50)}px`;
    box.style.top = `${Math.floor(Math.random() * 80)}%`;
    box.style.left = `${Math.floor(Math.random() * 80)}%`;
    parent.appendChild(box);
  }
};

3. Generate random abstract backgrounds and determine how many color boxes to generate.

generateBoxes(20, document.querySelector(".bg"));