Random Gradient Generator - Javascript Tutorial

Hi everyone👋 , In this article, we will create a random gradient generator. You can refer to my YouTube video to see a working tutorial for better understanding and a step-by-step guide of the same.

The random gradient generator outputs a gradient randomly along with the CSS code. It consists of two buttons – Generate and Copy. If you are a beginner looking for a project to level up your javascript skills then this project is perfect for you. Even javascript intermediates can try this project. For this project, we use HTML, CSS, and Vanilla Javascript. Let us get started with the tutorial.

HTML :

We begin by creating an HTML file and save it as “index.html”. You have to copy the code below and paste it into your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Gradient Generator</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div id="output-color"></div>
        <input type="text" id="output-code" readonly>
        <div class="btn-container">
            <button id="generate-btn">Generate</button>
            <button id="copy-btn">Copy</button>
        </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>

CSS :

To make the generator look good, we need to add some styles to the elements. For this purpose, we need CSS. You have to create a file named “style.css”. Copy the code below and paste it into your stylesheet.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: "Poppins",sans-serif;
}
body{
    height: 100vh;
    background: linear-gradient(
        #f7f9fd 50%,
        #587ef4 50%
    );
}
.wrapper{
    width: 80vmin;
    background-color: #ffffff;
    padding: 50px 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);
}
#output-color{
    width: 100%;
    height: 35vmin;
    border-radius: 5px;
}
#output-code{
    background-color: #f1f5fc;
    font-size: 2.3vmin;
    font-weight: 400;
    color: #3f415f;
    width: 100%;
    padding: 15px 10px;
    border-radius: 5px;
    margin: 20px 0 40px 0;
}
.btn-container{
    display: flex;
    justify-content: space-around;
}
.btn-container button{
    background-color: #587ef4;
    min-width: 40%;
    padding: 15px 0;
    color: #ffffff;
    border-radius: 30px;
    font-size: 2.6vmin;
    font-weight: 500;
    cursor: pointer;
}

Javascript :

Now that the generator looks good, let us add functionality to the Generate button and Copy button. You need to create a javascript file – “script.js”. Now all you have to do is copy and paste the code below in your newly create JS file.

We have used two functions of the Math object here.

Math.floor() – Rounds of the number passed to the largest integer which is equal to or less than the number.
Math.random() – Generates random numbers in the desired range.

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");
    alert("Code Copied To Clipboard");
});

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

Your random gradient generator is now ready. Wasn’t that easy? You can go ahead and try adding some more features to your gradient generator to make it even better.

Alright, guys! I hope this article was helpful for you if it is the leave your comments below. I will meet you in another article until then KEEP CODING🤗.

Proxlight

Proxlight

Random Gradient Generator - Javascript Tutorial

- By Pratyush Mishra