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

18 Mar, 2020
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.<!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>
<!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>
<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>
<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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)