<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.