Build A Gradient Color Generator in HTML CSS & JavaScript

by Letscode - October 4,2023

As a web developer, you must have visited different sites to generate a gradient background color for your project. But have you ever felt the desire to create your own beautiful gradient generator from scratch?

In this blog post, I’ll show the steps for building a gradient color generator using HTML, CSS, and JavaScript. This project is perfect for beginners who want to learn more about web development concepts such as DOM manipulation, event handling, and CSS styling.

In this gradient generator, you can easily create different gradient backgrounds by randomly generating colors or selecting your preferred colors. You can also copy the CSS color code for your generated gradient with a single click.

Steps For Creating Gradient Generator in JavaScript

To create a gradient color generator using HTML, CSS, and JavaScript, follow the given steps line by line:

1. File Structure

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic structure for a gradient color generator.

HTML

                        
<!DOCTYPE html>
<!-- Coding By Letscodeweb - youtube.com/@Letscodeweb -->
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Gradient Generator in JavaScript | Letscodeweb</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
</head>

<body>
    <div class="wrapper">
        <div class="gradient-box"></div>
        <div class="row options">
            <div class="column direction">
                <p>Direction</p>
                <div class="select-box">
                    <select>
                        <option value="to top">Top</option>
                        <option value="to right top">Right top</option>
                        <option value="to right">Right</option>
                        <option value="to right bottom">Right bottom</option>
                        <option value="to bottom">Bottom</option>
                        <option value="to left bottom">Left bottom</option>
                        <option value="to left">Left</option>
                        <option value="to left top" selected>Left top</option>
                    </select>
                </div>
            </div>
            <div class="column palette">
                <p>Colors</p>
                <div class="colors">
                    <input type="color" value="#5665E9">
                    <input type="color" value="#A271F8">
                </div>
            </div>
        </div>
        <textarea class="row" disabled>background-image: linear-gradient(to left top, #977DFE,  #6878FF);</textarea>
        <div class="row buttons">
            <button class="refresh">Refresh Colors</button>
            <button class="copy">Copy Code</button>
        </div>
    </div>

</body>

</html>

Second, paste the following codes into your style.css file.

CSS

                        
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

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

body {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #8A6CFF;
}

.wrapper {
  width: 450px;
  padding: 25px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}

.wrapper .gradient-box {
  height: 220px;
  width: 100%;
  border-radius: 7px;
  background: linear-gradient(to left top, #5665E9, #A271F8);
}

.wrapper .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}

.options p {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}

.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}

.select-box select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.12rem;
  background: none;
}

.options .palette {
  margin-left: 60px;
}

.palette input {
  height: 41px;
  width: calc(100% / 2 - 20px);
}

.palette input:last-child {
  margin-left: 6px;
}

.wrapper textarea {
  width: 100%;
  color: #333;
  font-size: 1.05rem;
  resize: none;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.buttons button {
  padding: 15px 0;
  border: none;
  outline: none;
  color: #fff;
  margin: 0 0 -15px;
  font-size: 1.09rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}

.buttons .refresh {
  background: #6C757D;
}

.buttons .refresh:hover {
  background: #5f666d;
}

.buttons .copy {
  background: #8A6CFF;
}

.buttons .copy:hover {
  background: #704dff;
}

@media screen and (max-width: 432px) {
  .wrapper {
    padding: 25px 20px;
  }

  .row :where(.column, button) {
    width: calc(100% / 2 - 8px);
  }

  .options .select-box {
    padding: 8px 15px;
  }

  .options .palette {
    margin-left: 40px;
  }

  .options .colors {
    display: flex;
    justify-content: space-between;
  }

  .palette input {
    width: calc(100% / 2 - 5px);
  }

  .palette input:last-child {
    margin-left: 0;
  }
}

Third, paste the following codes into your script.js file.

                                              
const gradientBox = document.querySelector(".gradient-box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const refreshBtn = document.querySelector(".refresh");
const copyBtn = document.querySelector(".copy");

const getRandomColor = () => {
    // Generating a random color in hexadecimal format. Example: #5665E9
    const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
    return `#${randomHex}`;
}

const generateGradient = (isRandom) => {
    if(isRandom) { // If isRandom is true, update the colors inputs value with random color
        colorInputs[0].value = getRandomColor();
        colorInputs[1].value = getRandomColor();
    }
    // Creating a gradient string using the select menu value with color input values
    const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
    gradientBox.style.background = gradient;
    textarea.value = `background: ${gradient};`;
}

const copyCode = () => {
    // Copying textarea value and updating the copy button text
    navigator.clipboard.writeText(textarea.value);
    copyBtn.innerText = "Code Copied";
    setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
}

colorInputs.forEach(input => {
    // Calling generateGradient function on each color input clicks
    input.addEventListener("input", () => generateGradient(false));
});

selectMenu.addEventListener("change", () => generateGradient(false));
refreshBtn.addEventListener("click", () => generateGradient(true));
copyBtn.addEventListener("click", copyCode);

Conclusion and Final Words

By following the steps in this blog post, you have successfully built a Gradient Color Generator using HTML, CSS, and JavaScript. With the knowledge and skills you’ve gained from this project, you can now customize the code to suit your unique needs.

Creating a color palette generator is another great way to improve your web development skills. So, don’t forget to check out this blog on the Random Color Palette Generator in JavaScript.

If you encounter any problems or your code is not working as expected, you can download the source code files of this gradient color generator for free. Click on the download button to get the zip file containing the project folder with source code files.

Build A Gradient Color Generator in HTML CSS & JavaScript

by Letscode - October 4,2023

Steps For Creating Gradient Generator in JavaScript

1. File Structure

Conclusion and Final Words

Letscode - October 20,2023

Letscode - October 4,2023

Letscode - October 10,2023

Letscode - November 4,2023

Letscode - October 24,2023