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

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.

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

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

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.