Create a Dynamic Gradient Color Generator with HTML, CSS, and JavaScript

Hello friends, today in this blog, we will learn how to create a dynamic gradient color generator with HTML, CSS, and JavaScript. In our previous blog, we saw how to build a custom QR Code Generator with qrcode.js and JavaScript. You can check my other javascript projects after reading this blog.

Do you love experimenting with color combinations in your web design projects? Are you looking for a fun and creative way to practice your HTML, CSS, and JavaScript skills? If so, you'll definitely want to check out the dynamic gradient color generator we'll be building in this blog post!

A gradient color generator allows you to create unique color combinations that transition smoothly from one hue to another. By using HTML, CSS, and JavaScript, we can build a custom color generator that lets you create your own gradient color schemes with just a few clicks. Whether you're a beginner or an experienced web developer, this project is a great way to learn new skills and have some fun in the process.

In this blog post, we'll take a deep dive into building a dynamic gradient color generator from scratch using HTML, CSS, and JavaScript. We'll cover the tools and technologies we'll be using, walk through the steps involved in building the generator, and provide some tips for customizing it to fit your needs. By the end of this post, you'll have a fully functional color generator that you can use in your own web design projects. So, let's get started!

Let's Set up the Project

Step by step guide to set up basic file structures for the project.

Create a new folder for your project and name it something descriptive.
Inside the project folder, create a new file called index.html. This will be your main HTML file.
Open index.html in a code editor such as Visual Studio Code.
Inside the head section of index.html, create a new link element that links to your CSS file. The link element should look like this: "<link rel="stylesheet" href="styles.css">" Make sure to replace styles.css with the name of your CSS file.
Save the changes to index.html.
In the same project folder, create a new file called styles.css. This will be your main CSS file.
Open styles.css in a code editor.
Write your CSS rules inside styles.css.
Save the changes to styles.css.
In the head section of index.html, create a new script element that links to your JavaScript file. The script element should look like this: "<script src="script.js"></script>" Make sure to replace script.js with the name of your JavaScript file.
Save the changes to index.html.
In the same project folder, create a new file called script.js. This will be your main JavaScript file.
Open script.js in a code editor.
Write your JavaScript code inside script.js.
Save the changes to script.js.

Now you have successfully created a basic HTML, CSS, and JavaScript file and linked them together. Any changes you make to your CSS or JavaScript files will be reflected in your index.html file when you refresh the page.

Code of HTML, CSS, and JavaScript Files

Here's the good news: you don't have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.

HTML Code

Just paste this code into HTML File which you have created.

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

<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Color Generator - InCoderWeb</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<div class="mainContainer">
<div class="gradientOutput"></div>
<div class="colorOptions">
<div class="colorDirection">
<p style="font-size: .9rem; margin-bottom: .3rem;">Colors Direction</p>
<select name="colorDirection" id="colorDirectionSelect">
<option value="to top">Top</option>
<option value="to top right" selected>Top Right</option>
<option value="to right">Right</option>
<option value="to bottom right">Bottom Right</option>
<option value="to bottom">Bottom</option>
<option value="to bottom left">Bottom Left</option>
<option value="to left">Left</option>
<option value="to top left">Top Left</option>
</select>
</div>
<div class="colorInputs">
<p style="font-size: .9rem;">Colors</p>
<input type="color" value="#000000" class="colorInput">
<input type="color" value="#ff0000" class="colorInput">
</div>
</div>
<textarea id="gradientCode" disabled>background: linear-gradient(#000, red);</textarea>
<div class="optionButtons">
<button id="randomColor">Random Color</button>
<button id="copyBtn">Copy Code</button>
</div>
</div>

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

</html>

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* --------------------- Created By InCoder --------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;
}

body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: linear-gradient(to top right, #834aaa, #7c7cd9);
}

.mainContainer {
width: 20rem;
display: flex;
align-items: center;
border-radius: 1rem;
flex-direction: column;
justify-content: start;
background-color: #fff;
}

.gradientOutput {
width: 90%;
height: 12rem;
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
border-radius: 1rem;
}

.colorOptions {
width: 100%;
display: flex;
margin-top: 1rem;
align-items: center;
justify-content: space-around;
}

.colorDirection select {
width: 9rem;
height: 2rem;
padding: 0.2rem;
padding-right: 0.2rem;
border-radius: 0.5rem;
border: 2px solid #00000040;
}

.colorDirection select option {
cursor: pointer;
}

.colorDirection select:focus {
outline: none;
border: none;
border: 2px solid #0000008c;
}

.colorInput {
border: none;
width: 3.5rem;
height: 2.5rem;
cursor: pointer;
appearance: none;
border-radius: 0.5rem;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
}
.colorInput::-webkit-color-swatch {
border: none;
border-radius: 0.3rem;
}
.colorInput::-moz-color-swatch {
border: none;
border-radius: 0.3rem;
}

#gradientCode {
width: 90%;
height: 3.2rem;
resize: none;
padding: 0.5rem;
margin-top: 1rem;
border-radius: 0.5rem;
border: 2px solid #00000047;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

.optionButtons {
width: 90%;
display: flex;
margin-top: 1rem;
margin-bottom: 1rem;
justify-content: space-between;
}

.optionButtons button {
border: 0px;
z-index: 1;
width: 8.5rem;
color: #fff;
height: 2.5rem;
overflow: hidden;
font-size: 1rem;
cursor: pointer;
position: relative;
border-radius: 0.3rem;
text-decoration: none;
background-position: 5rem;
text-transform: capitalize;
background: linear-gradient(to top right, #834aaa, #7c7cd9);
}

.optionButtons button::before {
content: "";
top: 0%;
left: -100%;
z-index: -1;
width: 100%;
height: 100%;
color: #fff;
position: absolute;
transition: left 0.4s;
background-color: #202020;
}

.optionButtons button:hover::before {
left: 0%;
}

#copyBtn {
background: #202020!important;
}

#copyBtn::before {
background: linear-gradient(to top right, #834aaa, #7c7cd9)!important;
}

JavaScript Code

// --------------------- Created By InCoder ---------------------
const gradientOutput = document.querySelector('.gradientOutput')
colorDirectionSelect = document.querySelector('#colorDirectionSelect')
gradientCode = document.getElementById('gradientCode')
randomColor = document.getElementById('randomColor')
copyBtn = document.getElementById('copyBtn')
colorInput = document.querySelectorAll('.colorInput')

const generateRandomColor = () => {
let colorCode = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
return colorCode
}

let color1 = generateRandomColor()
let color2 = generateRandomColor()
let cssCode = `background: linear-gradient(${colorDirectionSelect.value}, ${color1}, ${color2});`
colorInput[0].value = color1
colorInput[1].value = color2
gradientOutput.setAttribute('style', cssCode)
gradientCode.value = cssCode

colorDirectionSelect.addEventListener('change', (e) => {
cssCode = `background: linear-gradient(${e.target.value}, ${colorInput[0].value}, ${colorInput[1].value});`
gradientOutput.setAttribute('style', cssCode)
gradientCode.value = cssCode
})

colorInput.forEach(input => {
input.addEventListener('input', (e) => {
cssCode = `background: linear-gradient(${colorDirectionSelect.value}, ${colorInput[0].value}, ${colorInput[1].value});`
gradientOutput.setAttribute('style', cssCode)
gradientCode.value = cssCode
})
});

randomColor.addEventListener('click', () => {
colorInput[0].value = generateRandomColor()
colorInput[1].value = generateRandomColor()
cssCode = `background: linear-gradient(${colorDirectionSelect.value}, ${colorInput[0].value}, ${colorInput[1].value});`
gradientOutput.setAttribute('style', cssCode)
gradientCode.value = cssCode
})

copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(cssCode).then(function () {
copyBtn.innerHTML = "Code Copied"
setTimeout(() => {
copyBtn.innerHTML = "Copy Code"
}, 1000)
}, function (err) {
console.log('Not Copied')
});
})

Here is the output of this code

Hurray! now you've created a Gradient Color Generator. You can download files by clicking on the download button after downloading file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog. Here is the download button:-

Create a Dynamic Gradient Color Generator with HTML, CSS, and JavaScript

Let's Set up the Project

You may like these:

Code of HTML, CSS, and JavaScript Files

HTML Code

CSS Code

JavaScript Code

Here is the output of this code

Zip File's Password = InCoderWeb

Post a Comment

Create sign up & sign in form with validation | Next js & Tailwind CSS

Contact form