diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6ee2a62
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Gradient Background
+
+
+
+ Background Generator
+
+
+ Current CSS Background
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cf9c61d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,20 @@
+var css = document.querySelector("h3");
+var color1 = document.querySelector(".color1");
+var color2 = document.querySelector(".color2");
+var body = document.getElementById("gradient");
+
+
+function setGradient() {
+ body.style.background =
+ "linear-gradient(to right, "
+ + color1.value
+ + ", "
+ + color2.value
+ + ")";
+
+ css.textContent = body.style.background + ";";
+}
+
+color1.addEventListener("input", setGradient);
+
+color2.addEventListener("input", setGradient);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..f99dbe9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,27 @@
+body {
+ font: '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, red , yellow); /* Standard syntax */
+}
+
+h1 {
+ font: 600 3.5em 'Raleway', sans-serif;
+ color: rgba(0,0,0,.5);
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: .5em;
+ width: 100%;
+}
+
+h3 {
+ font: 900 1em 'Raleway', sans-serif;
+ color: rgba(0,0,0,.5);
+ text-align: center;
+ text-transform: none;
+ letter-spacing: 0.01em;
+
+}