In this blog post, I will show you how to create a gradient color generator tool using HTML, CSS and JavaScript. A gradient color is a smooth transition between two or more colors, which can create beautiful effects for web design. A gradient color generator tool can help you easily create and customize your own gradient colors, and also provide you with the code to use them in your website.
To create a gradient color generator tool, we will need three main components: HTML, CSS and JavaScript. HTML will provide the structure and elements of our tool, such as the inputs for selecting colors, the output for displaying the gradient color and the code, and the title and subtitle for our tool. CSS will provide the style and appearance of our tool, such as the fonts, colors, layout and background. JavaScript will provide the functionality and interactivity of our tool, such as changing the gradient color and code based on the user's input, and copying the code to clipboard.
Create Gradient Color Generator in JavaScript
To create this gradient color generator using html css and javascript, First you need to create three extension files, Html file, Css file, and JavaScript file. After creating these three files just copy the code and paste to your spacific file. Also you can download given file from download button bellow.
Let's Create a Html file, name of index.html. Notes that, you've to create file with .html extension.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gradient Color Generator in JavaScript</title>
<link rel="stylesheet" href="./src/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./src/js/script.js" defer></script>
</head>
<body class="body-background">
<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: linear-gradient(to left top, #acafce, #a074ec);</textarea>
<div class="row buttons">
<button class="refresh">Refresh Colors</button>
<button class="copy">Copy Code</button>
</div>
</div>
</body>
</html>
After that, Create a Css file, name of style.css. Notes that, Css file also have a .css extension.
@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: linear-gradient(to left top, #acafce, #a074ec);
}
.wrapper {
width: 450px;
padding: 25px;
background: #ffffff;
border-radius: 9px;
box-shadow: 3 15px 30px rgba(10, 10, 56, 0.06);
}
.wrapper .gradient-box {
height: 220px;
width: 100%;
border-radius: 7px;
background: linear-gradient(to left top, #acafce, #a074ec);
}
.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;
}
}
Lastly, Create javascript file with the name of script.js. Notes that, create file name.js extension.
const gradientBox = document.querySelector(".gradient-box");
const gradientBox2 = document.querySelector(".body-background");
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 = () => {
const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
return `#${randomHex}`;
}
const generateGradient = (isRandom) => {
if(isRandom) {
colorInputs[0].value = getRandomColor();
colorInputs[1].value = getRandomColor();
}
const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
gradientBox.style.background = gradient;
gradientBox2.style.background = gradient;
textarea.value = `background: ${gradient};`;
}
const copyCode = () => {
navigator.clipboard.writeText(textarea.value);
copyBtn.innerText = "Code Copied";
setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
}
colorInputs.forEach(input => {
input.addEventListener("input", () => generateGradient(false));
});
selectMenu.addEventListener("change", () => generateGradient(false));
refreshBtn.addEventListener("click", () => generateGradient(true));
copyBtn.addEventListener("click", copyCode);
The downloaded zip file includes the project folder with all the necessary source code files.