Background Generator

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>

    <h1>Background Generator</h1>
    <input class="color1" type="color" name="color1" value="#00c3ff">
    <input class="color2" type="color" name="color2" value="#ffff1c">
    <h2>Current Css Background</h2>
    <h3></h3>
    
  </body>
</html>

{
  "plnkr": {
    "runtime": "system"
  }
}

/* Add your styles here */

body {
  font-family: "Raleway", sans-serif;
  color: rgba(0, 0, 0, .5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  top: 15%;
  background: linear-gradient(to right, #00c3ff, #ffff1c);
}

h1 {
  font-size: 3.5em;
  font-weight: 600;
  width: 100%;
}

h3 {
  font-size: 1em;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0.01em;
}

// Add your code here

let h3 = document.querySelector("h3");
let body = document.querySelector("body");
let color1 = document.querySelector(".color1");
let color2 = document.querySelector(".color2");

function setGradient() {
  body.style.background = "linear-gradient(to right, " + color1.value + ", " + color2.value + ")";

  h3.textContent = body.style.background + ";";
}

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);