├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # CSS-Gradient-Background
2 |
3 |
4 |
5 |
6 | https://user-images.githubusercontent.com/42389395/176416843-b73634a3-a5b7-4e72-92b7-ef5869c16e4e.mov
7 |
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Test
7 |
8 |
9 |
10 |
11 |
12 | CSS Gradient Background Animation
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: linear-gradient(-45deg, #F2EEE3, #E9D1D0, #FAE0BA, #EB8C73, #F0DED1, #DEC4A7);
3 | background-size: 400% 400%;
4 | animation: gradient 15s ease infinite;
5 | height: 100vh;
6 | }
7 |
8 | @keyframes gradient {
9 | 0% {
10 | background-position: 0% 50%;
11 | }
12 | 50% {
13 | background-position: 100% 50%;
14 | }
15 | 100% {
16 | background-position: 0% 50%;
17 | }
18 | }
19 |
20 | h1 {
21 | text-align: center;
22 | color: #EB8C73;
23 | }
--------------------------------------------------------------------------------