<body id="gradient">
    <h1>Background Generator</h1>
    <h2>Created by AwakeningSTEM</h2>
    <input class="color1" type="color" name="color1" value="#8C2CBE">
    <input class="color2" type="color" name="color1" value="#E00BD8">
    <h3> Click the tabs to change the color</h3>
body{
    font-family: 'Papyrus', cursive;
    color: indigo;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    top:10%;
    background:linear-gradient(to right ,purple,pink);
}
h1 {
    font: 600 3.5em 'fantasy', cursive;
    color:white;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width:100%;

}
h2{
    font: 600 1.5em 'fantasy',cursive;
    color: white;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
}
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");

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


color2.addEventListener("input", Gradient);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.