├── index.html
├── script.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Gradient Background
5 |
6 |
7 |
8 | Background Generator
9 |
10 |
11 | Current CSS Background
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | var css = document.querySelector("h3");
2 | var color1 = document.querySelector(".color1");
3 | var color2 = document.querySelector(".color2");
4 | var body = document.getElementById("gradient");
5 |
6 | function setGradient() {
7 | body.style.background =
8 | "linear-gradient(to right, "
9 | + color1.value
10 | + ", "
11 | + color2.value
12 | +")";
13 |
14 | css.textContent = body.style.background + ";";
15 | }
16 |
17 | color1.addEventListener("input", setGradient)
18 |
19 | color2.addEventListener("input", setGradient)
20 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 'Raleway', sans-serif;
3 | color: rgba(0,0,0,.5);
4 | text-align: center;
5 | text-transform: uppercase;
6 | letter-spacing: .5em;
7 | top: 15%;
8 | background: linear-gradient(to right, red , yellow); /* Standard syntax */
9 | }
10 |
11 | h1 {
12 | font: 600 3.5em 'Raleway', sans-serif;
13 | color: rgba(0,0,0,.5);
14 | text-align: center;
15 | text-transform: uppercase;
16 | letter-spacing: .5em;
17 | width: 100%;
18 | }
19 |
20 | h3 {
21 | font: 900 1em 'Raleway', sans-serif;
22 | color: rgba(0,0,0,.5);
23 | text-align: center;
24 | text-transform: none;
25 | letter-spacing: 0.01em;
26 |
27 | }
28 |
--------------------------------------------------------------------------------