Gradient Color Generator using HTML, CSS and JavaScript

Welcome to Coding Torque. In this blog, we are going to create a Gradient Color Generator using HTML, CSS and JavaScript. You should create this project if you are a beginner and learning JavaScript. In this project, two color inputs are grabbed on changed using javascript and the gradient is generated.

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Gradient Color Generator using JavaScript with Source Code - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further Code here -->    

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag

<div class="container">
    <h3 style="text-align: center;">Gradient Generator</h3>
    <div id="gradient-box"></div>
    <div class="copycode">
        <input type="text" id="color-code" value="linear-gradient(45deg, deepskyblue, blue)" readonly />
        <button title="click to copy" id="copyBtn"><i class="fas fa-copy"></i></button>
    </div>
    <div>
        <input type="color" name="color1" id="color1" value="#ffffff">
        <input type="color" name="color2" id="color2" value="#ffffff">
    </div>
</div>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Potta+One&display=swap");

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5181ff;
}

.container {
  margin-top: 10rem;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20rem;
  padding: 26px;
  border-radius: 10px;
}

#gradient-box {
  height: 8rem;
  width: 16rem;
  margin: 1rem 0;
  border-radius: 10px;
  background: linear-gradient(45deg, deepskyblue, blue);
}

.copycode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #f1f5fc;
  border-radius: 5px;
  border: 1px solid #cfd5d5;
  margin-bottom: 10px;
}

#color-code {
  width: 100%;
  color: #044db4;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 10px;
  background: transparent;
  border: none;
  outline: none;
}

#copyBtn {
  width: 30px;
  height: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

let color1 = document.getElementById("color1");
let color2 = document.getElementById("color2");
let gradient_box = document.getElementById("gradient-box");
let color_code = document.getElementById("color-code");

function changeGradient() {
    gradient_box.style.background = `linear-gradient(45deg, ${color1.value}, ${color2.value})`;
    color_code.value = `${gradient_box.style.background} ;`
}

color1.addEventListener("input", changeGradient);
color2.addEventListener("input", changeGradient);

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖