How to Build a Gradient Color Generator with HTML, CSS, and JavaScript

Published on June 26, 2024

Hello everyone, and welcome to our tutorial on how to create a simple gradient generator using HTML, CSS, and JavaScript. In this video, we’ll walk you through step by step on how to build this useful tool that allows you to generate custom gradients for your web projects.

Now, before we dive into the coding, let’s briefly talk about what a gradient is. A gradient is a smooth transition between two or more colours. It adds depth and visual interest to your designs, and it’s a popular technique used in web development to enhance the look and feel of websites.

Let’s start by examining the HTML structure of our project. Here, we have a basic HTML template. We’ve included a title for our project, a link to Font Awesome for some icons, and a link to an external CSS file called ‘style.css‘.

Inside the body tag, we have a container div that holds our gradient generator interface. Within this container, we have a ‘colours’ div containing two colour input elements. These input elements allow users to select the colours for their gradient. We’ve set default colours for demonstration purposes, but users can choose any colours they like.

Next, we have a ‘buttons’ div containing buttons to select the direction of the gradient. Each button has an icon representing a direction, such as up, down, right, left, top right, bottom left, etc. When clicked, these buttons will set the direction of the gradient accordingly.

Below the colour inputs and direction buttons, we have a ‘Generate’ button. This button, when clicked, will trigger a JavaScript function to generate the gradient code based on the selected colours and direction.

Finally, we have an ‘output’ div containing a textarea element where the generated gradient code will be displayed. Below the textarea, there’s a ‘Copy‘ button to allow users to easily copy the generated code to their clipboard.

To make our gradient generator functional, we’ve linked an external JavaScript file called ‘script.js’. This file contains the necessary functions to handle user interactions and generate the gradient code dynamically.

CSS

We’ll begin by styling our HTML elements to give them a polished and professional look. We’ve added some styles to ensure that our gradient generator is visually appealing and user-friendly.

We start by styling the main container where our gradient generator resides. We’ve given it a light background colour, added some padding for spacing, rounded the corners with a border-radius, and applied a subtle box-shadow to create a sense of depth.

Moving on to the colour inputs section, we’ve arranged the colour input elements horizontally using flexbox. Each input has been styled to have a fixed width and height, with a border-radius to soften the edges. We’ve also added a hover effect to give users visual feedback when they interact with the inputs.

The direction buttons section follows a similar styling approach. We’ve used flexbox to arrange the buttons horizontally and spaced them evenly. Each button has a fixed size, a border to create a distinct outline, and transitions for smooth animation effects. The active button and hover states are styled differently to provide visual cues to the user.

Our ‘Generate’ button is styled to stand out with a contrasting background colour and white text. We’ve applied padding for better touch interaction, set a cursor pointer, and added a transition effect to make the button feel responsive.

Moving down to the output section, we’ve styled the textarea where the generated gradient code will be displayed. It’s given a background color to distinguish it from the rest of the interface, along with padding for readability. We’ve disabled resizing to maintain the layout consistency and increased the font size for better visibility.

Finally, we have the ‘Copy’ button, which allows users to copy the generated code with ease. It shares the same styling as the ‘Generate’ button to maintain visual consistency throughout the interface.

JAVASCRIPT

We’ve written some JavaScript code to make our gradient generator fully operational. This code adds interactivity to our interface, allowing users to select colours, choose gradient directions, generate gradient codes, and copy them with ease.

We begin by declaring variables to store references to the colour input elements, the current gradient direction, and the textarea where the generated code will be displayed.

Next, we have a function called setDirection. This function is triggered when a direction button is clicked. It takes two parameters: the desired direction value and the button element itself (_this). Within this function, we remove the ‘active’ class from all direction buttons to reset their styling, then add the ‘active’ class to the button that was clicked. We update the currentDirection variable to the selected direction value.

Moving on, we have the generateCode function. This function is called when the ‘Generate’ button is clicked. It constructs a gradient code string using the selected colours and direction, then updates the value of the textarea to display this code. Additionally, it sets the background of the body element to the generated gradient for immediate visual feedback.

Lastly, we have the copyText function. This function is triggered when the ‘Copy’ button is clicked. It selects the text inside the textarea, copies it to the clipboard using the document.execCommand(“copy”) method, and alerts the user with a message indicating that the gradient code has been copied successfully.

Additionally, we’ve called the generateCode function once at the end of the script to ensure that the gradient code is generated automatically when the page loads.

And that wraps up the JavaScript implementation for our gradient generator! With this code in place, users can now interact with our interface to create custom gradients for their web projects. In the next part of this tutorial, we’ll bring everything together and demonstrate how our gradient generator works. So stay tuned!