Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Difficulty Level : Medium
  • Last Updated : 18 Mar, 2020

background-gradient-color

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • HTML code: 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.




    <!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 code: 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.




    <style>
        /* Styling body */
        body {
            font: "Roboto";
            text-align: center;
            background: linear-gradient(to right, #0000ff, #add8e6);
        }
         
        /* h1 tag text color */
        h1 {
          color: white;
        }
        </style>
  • JavaScript code: 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.




    <script>
        var css = document.querySelector("h3");
        var color1 = document.querySelector(".color1");
        var color2 = document.querySelector(".color2");
        var body = document.querySelector(".change");
          
        // Changing color for the gradient
        function changeGradient() {
            body.style.background =
                "linear-gradient(to right, " 
                    + color1.value + ", " 
                    + color2.value + ")";
      
            css.textContent = body.style.background + ";";
        }
      
        color1.addEventListener("input", changeGradient);
      
        color2.addEventListener("input", changeGradient);
    </script>

Complete code: It is the combination of the avobe three sectons code.




<!DOCTYPE html>
<html>
  
<head>
    <title>Gradient color generator</title>
  
    <style>
        body {
            font: "Roboto";
            text-align: center;
            background: linear-gradient(to right,
                        #0000ff, #add8e6);
        }
      
        h1 {
            color: white;
        }
    </style>
</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" />
  
    <script>
        var css = document.querySelector("h3");
        var color1 = document.querySelector(".color1");
        var color2 = document.querySelector(".color2");
        var body = document.querySelector(".change");
  
        // Changing color for the gradient
        function changeGradient() {
            body.style.background =
                "linear-gradient(to right, " 
                    + color1.value + ", " 
                    + color2.value + ")";
  
            css.textContent = body.style.background + ";";
        }
  
        color1.addEventListener("input", changeGradient);
  
        color2.addEventListener("input", changeGradient);
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :