DEV Community

Cover image for Random Gradient Generator using JavaScript & CSS
Shantanu Jana
Shantanu Jana

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
*{
    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);
}
Enter fullscreen mode Exit fullscreen mode

Create the basic structure of Gradient Generator

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>
Enter fullscreen mode Exit fullscreen mode
.wrapper h2{
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 30px;
  color: #0558b7;
}
Enter fullscreen mode Exit fullscreen mode

 Add headings to the box

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>
Enter fullscreen mode Exit fullscreen mode
#output-color{
    width: 100%;
    height: 35vmin;
    border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Create a display to see gradient colors

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>
Enter fullscreen mode Exit fullscreen mode
#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;
}
Enter fullscreen mode Exit fullscreen mode

Create a box for the color code

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Create Generate Button and Copy Button

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");
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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});`;
}
Enter fullscreen mode Exit fullscreen mode

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");
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Random Gradient Generator using JavaScript

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;
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

The function to generate random colors can be improved a little and the general structure of the code as well, here is the code with comments on it explaining the changes:

Cheers!

Collapse
rordan1 profile image
R o r y ♨️

Will try it out