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.
If you’re excited to see a demo of a gradient generator in action, click here to check it out. For a full video tutorial on creating a gradient color generator using HTML, CSS, and JavaScript, you can watch the given YouTube video.
Video Tutorial of Gradient Color Generator in JavaScript
If you prefer visual learning, then the above video tutorial is a great resource for you. In this video, I’ve explained each line of code in detail with comments to help you understand what’s happening at each step.
But if you prefer reading blog posts or want a quick summary of the steps involved in creating a gradient generator, you can continue reading this post. By the end of this post, you will have a good understanding of how to create a gradient color generator in HTML, CSS, and JavaScript on your own from scratch.
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:
- 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.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gradient Color Generator in JavaScript | CodingNepal</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>
Next, add the following CSS codes to your style.css file to style and make the gradient generator visually appealing. If you wish, you can customize it to your liking by changing the color, font, size, and other properties in the file.
/* 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;
}
}
Finally, add the following JavaScript code to your script.js file to add functionality for the gradient generator: To understand the code more deeply, you can watch the above YouTube video tutorial or read the comments within the code and experiment with it.
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.
