Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Gradient Color Generator" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Gradient Color Generator" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Gradient Color Generator [Source Code]
To get the following HTML, CSS & JS code for the Gradient Color Generator project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!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</title>
<link rel="stylesheet" href="style.css">
<!-- Font awesome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<i class="fa-solid fa-rotate refreshBtn"></i>
<div class="gradientColorBox"></div>
<div class="direction">
<p>Direction</p>
<div class="selectContainer">
<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="colorContainer">
<p>Colors</p>
<div class="colors">
<input type="color" value="#9acd32">
<input type="color" value="#daff44">
</div>
</div>
<textarea disabled>background: linear-gradient(to left top, #9acd32, #daff44);</textarea>
<div class="button">
<button class="copyBtn">Copy Code</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&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-color: yellowgreen;
}
.container {
width: 450px;
background: #fff;
padding: 30px;
border-radius: 10px;
position: relative;
}
i {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
i:active {
transform: rotate(45deg);
}
.gradientColorBox {
height: 250px;
width: 100%;
border-radius: 10px;
background: linear-gradient(to left top, #9acd32, #daff44);
}
p {
font-size: 20px;
margin: 5px 0;
}
.selectContainer {
border-radius: 5px;
height: 50px;
padding: 0 10px;
line-height: 50px;
border: 2px solid black;
cursor: pointer;
}
.selectContainer select {
width: 100%;
border: none;
outline: none;
font-size: 18px;
cursor: pointer;
background: none;
}
.colorContainer {
margin: 10px 0;
}
.colorContainer .colors {
display: flex;
justify-content: space-between;
align-items: center;
}
.colors input {
width: 49%;
height: 50px;
border: 2px solid black;
padding: 4px;
}
textarea {
color: black;
width: 100%;
font-size: 18px;
resize: none;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
border: 2px solid black;
}
.button {
display: flex;
align-items: center;
justify-content: center;
}
.copyBtn {
color: black;
background: #9acd32;
width: 100%;
height: 50px;
border: none;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
}
.copyBtn:active {
transform: scale(0.95);
}
JavaScript
const refreshBtnEl = document.querySelector(".refreshBtn");
const gradientColorBoxEl = document.querySelector(".gradientColorBox");
const selectMenuEl = document.querySelector("select");
const colorInputsEl = document.querySelectorAll(".colors input");
const textareaEl = document.querySelector("textarea");
const copyBtnEl = document.querySelector(".copyBtn");
// Code will copy to the user clipboard
const copyCode = () => {
navigator.clipboard.writeText(textareaEl.value);
copyBtnEl.innerText = "Code Copied";
setTimeout(() =>{
copyBtnEl.innerText = "Copy Code"
}, 2000);
}
// it create and returns a random color in hexadecimal code.
const getRandomColor = () => {
const randomHexColor = Math.floor(Math.random() * 0xffffff).toString(16);
return `#${randomHexColor}`;
}
// If isRandom is true generates a random color or else its generates custom color what user as given.
const generateGradient = (isRandom) => {
if(isRandom) {
colorInputsEl[0].value = getRandomColor();
colorInputsEl[1].value = getRandomColor();
}
const gradient = `linear-gradient(${selectMenuEl.value}, ${colorInputsEl[0].value}, ${colorInputsEl[1].value})`;
gradientColorBoxEl.style.background = gradient;
textareaEl.value = `background: ${gradient};`;
}
// it automatically updates if you change the input of colors
colorInputsEl.forEach( input => input.addEventListener("input", () => generateGradient(false)) );
// when we click on refresh button it creates random colors
refreshBtnEl.addEventListener("click", () => generateGradient(true));
// it automatically updates if you change any option from the selections
selectMenuEl.addEventListener("change", () => generateGradient(false));
// when we click on copy code button it copies the code to the user clipboard
copyBtnEl.addEventListener("click", copyCode);
Generating Download Link...