Random Gradient Generator using JavaScript & CSS

In this article you will learn how to make Random Gradient Generator using JavaScript HTML and CSS. At different times we also use Gradient color in web pages.

This type of color you can easily create through CSS. However, many times making the perfect gradient combination is much more difficult. To solve this problem I have created this project which can create colors randomly in a single click.

Watch its live demo to learn how it works.The most important point is that the colors will be added here at different angles. I made it with JavaScript only.

Below all are two buttons to generate one and copy the other. When you click on the Generate button, a different color will be generated each time. You can copy this color code by clicking on the copy button.

Step 1: Create the basic structure of Gradient Generator

We have created the basic structure of this project (Random Gradient Generator using JavaScript) using the following HTML and CSS code. First I added the background color of the webpage with the help of CSS code.

Then I made a box. I used the width of that box: 410px and the background color is white. I also added border-radius: 8px to make the four angles slightly rounded.

<div class="wrapper">

</div>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: "Poppins",sans-serif;
}

body{
    height: 100vh;
    background: #448aff;
}

.wrapper{
    width: 410px;
    background-color: #ffffff;
    padding: 30px 30px;
    border-radius: 8px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: 0 20px 25px rgba(60,60,100,0.15);
}

Step 2: Add headings to the box

Now I have added a title to this design. I have taken the help of h2 tags to add this title. Then I added the required style here using CSS code.

<h2>Gradient Generator</h2>

.wrapper h2{
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 30px;
  color: #0558b7;
}

Step 3: Create a display to see gradient colors

Gradient has created a display for color viewing. This display will help to see the random gradient colors. Each time you click on the Generate button, a different color is created.

 <div id="output-color"></div>

#output-color{
    width: 100%;
    height: 35vmin;
    border-radius: 5px;
}

Step 4: Create a box for the color code

Now I have created a box to view the color code. When you create a gradient color, the code required for it can be found in that box.

This allows you to copy this code and use it in your CFS file. I have used padding to determine the width: 100% and height of this box.

<input type="text" id="output-code" readonly>

#output-code{
    background-color: #f1f5fc;
    font-size: 2.7vmin;
    font-weight: 500;
    color: #044db4;
    width: 100%;
    padding: 15px 10px;
    border-radius: 5px;
    border: 1px solid #cfd5d5;
    margin: 20px 0 40px 0;
}

Step 5: Create Generate Button and Copy Button

Now I have created two buttons in this gradient generator. One will generate color and the other will copy. For this I used the button function of simple HTML and then designed it with the help of CSS.

 <div class="btn-container">
    <button id="generate-btn">Generate</button>
    <button id="copy-btn">Copy</button>
 </div>

.btn-container{
    display: flex;
    justify-content: space-around;
}
.btn-container button{
    background-color: #2e80b3;
    min-width: 42%;
    padding: 12px 0;
    color: #ffffff;
    border-radius: 7px;
    font-size: 3vmin;
    margin-bottom: 8px;
    font-weight: 500;
    cursor: pointer;
}

Using a small amount of CSS code below I set the background color and hover color for the second button. I have taken the help of nth-last-of-type (1) to select the second button.

.btn-container button:nth-last-of-type(1){
  background-color: #ae7617;
}
.btn-container button:nth-last-of-type(1):active{
  background: #1bb916;
}

Step 6: Activate the Random Gradient Generator using JavaScript

Above we have made the complete design. Now is the time to activate it using JavaScript. If you are a beginner, try to follow the complete information well. If you have difficulty understanding, you can let me know by commenting directly on my Instagram(@foolishdeveloper).

Using the following four line code, I have determined the constants of some ID functions one by one. Here I have determined the constants of four ID functions such as generate button, copy button, color display and color code box.

let generateBtn = document.getElementById("generate-btn");
let copyBtn = document.getElementById("copy-btn");
let outputColor = document.getElementById("output-color");
let outputCode = document.getElementById("output-code");

Now I have added hexadecimal characters using the following javascript. These characters combine randomly with each other to produce color.

The numbers 0 to 9 and the characters from a to f are mainly used here. Later we will create color by combining these characters with each other using JavaScript's Math.random function.

let hexString = "0123456789abcdef";

Now is the time to produce colors using JavaScript's Math.random function. If you know basic JavaScript, you can easily understand this color production method. random () method is used to generate a pseudorandom number, which is a number created with a formula that simulates randomness.

let randomColor = () => {
    let hexCode = "#";
    for( i=0; i<6; i++){
        hexCode += hexString[Math.floor(Math.random() * hexString.length)];
    }
    return hexCode;
}

Now I will create a gradient color by adding the random colors added above. You can watch its live demo.
➤ First I created two random colors and stored those two colors in Color One and Color Two.

➤ Then set an angle using Math.random. As I said before, the gradient colors can be seen here at different angles with each other. Then that random angle is stored in a constant called angle.

➤ Using line number 4 I added the first and second colors to each other at random angles. Then I arranged to show that output in the color display.

➤ I have managed to generate the color code using the JavaScript code below. The Gradient color that can be seen in the display of the code required for the color can be seen in a small box. This box I have already created using HTML and CSS code.

let generateGrad = () => {
    let colorOne = randomColor();
    let colorTwo = randomColor();
    let angle = Math.floor(Math.random() * 360);
    outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
    outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;
}

Now using the JavaScript below I have executed the copy button. Whenever you click on the copy button, the color code in the copy box will be copied.

copyBtn.addEventListener("click", () => {
    outputCode.select();
    document.execCommand("copy");
});

I have executed the generate button using the code below. Each time you click on this button, different colors will be generated.

generateBtn.addEventListener("click", generateGrad);
window.onload = generateGrad;

Final Javascript Code:

let generateBtn = document.getElementById("generate-btn");
let copyBtn = document.getElementById("copy-btn");
let outputColor = document.getElementById("output-color");
let outputCode = document.getElementById("output-code");
let hexString = "0123456789abcdef";

let randomColor = () => {
    let hexCode = "#";
    for( i=0; i<6; i++){
        hexCode += hexString[Math.floor(Math.random() * hexString.length)];
    }
    return hexCode;
}

let generateGrad = () => {
    let colorOne = randomColor();
    let colorTwo = randomColor();
    let angle = Math.floor(Math.random() * 360);
    outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
    outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;
}

copyBtn.addEventListener("click", () => {
    outputCode.select();
    document.execCommand("copy");
});

generateBtn.addEventListener("click", generateGrad);
window.onload = generateGrad;

Hopefully you have learned from this tutorial how Random Gradient Generator is created using HTML CSS and JavaScript.

I have fully explained for your convenience. You must comment on how you like this design.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/