How to create linear-gradient color generator using HTML, CSS and JavaScript ?

Last Updated : 25 Jan, 2023

The background generator can be made by using HTML, CSS, and JavaScript. It will generate a gradient background based on the values that you select. We will add two files namely style.css and script.js to add CSS and JS to our HTML(index.html). We have used an empty h3 tag so that we can display the linear-gradient color codes.

background-gradient-color

HTML: Save the code in a file as index.html. In index.html file, we will use two inputs of type “color” to get the values of gradients.

CSS: For CSS, we have done only some basic styling with some fonts and default background color. You can use the below stylesheet as a reference to create your own custom styles by changing some fonts and colors.

JavaScript: Now comes to the JavaScript part. The first thing we have done is we have selected the colour1 and colour2 nodes using document.querySelector() method. Using the same method we have also select the h3 and body. If you don’t know how the querySelector works, we highly recommend you to first learn about this. Now we create a function to set a newly selected gradient as the background. In this function, we simply apply values which we get using document.querySelector() to the background. We have used css.textcontent to assign the value of linear-gradient to the h3 tag.

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Gradient color generator</title> 
</head> 
  
<body class="change"> 
    <h1>GeeksforGeeks</h1> 
    <h3>Gradient color generator</h3> 
  
    <b>Current Colors for Gradient Background:</b> 
  
    <!-- Default color for gradient -->
    <input class="color1" type="color" value="#0000ff" /> 
    <input class="color2" type="color" value="#add8e6" /> 
</body> 
  
</html> 

CSS

<style> 
    /* Styling body */
    body { 
        font: "Roboto"; 
        text-align: center; 
        background: linear-gradient(to right, #0000ff, #add8e6); 
    } 
      
    /* h1 tag text color */
    h1 { 
    color: white; 
    } 
</style>