Author: | Aryan Tayal |
---|---|
Views Total: | 953 views |
Official Page: | Go to website |
Last Update: | January 21, 2022 |
License: | MIT |
Preview:

Description:
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"));