#gradient1 { background: linear-gradient(70deg, rgb(10, 3, 15) 0%, rgb(64, 69, 149) 25%, rgb(10, 3, 15) 50%, rgb(64, 69, 149) 75%, rgb(10, 3, 15) 100%); z-index: 0; animation: Scroll 4s linear infinite; background-size: 300% 200%; } @keyframes Scroll { 0% { background-position: 0% 0%; } 100% { background-position: 100% 33%; } } #gradient2 { background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(207, 204, 205) 55%, rgb(70, 9, 144) 100%); mix-blend-mode: color-dodge; } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: grid; place-items: center; width: 100%; height: 100vh; background: black; } div { grid-column: 1; grid-row: 1; } #container { padding: 1rem; height: 100vmin; width: 100vmin; display: grid; }
top of page
bottom of page
#gradient1 { background: linear-gradient(70deg, rgb(10, 3, 15) 0%, rgb(64, 69, 149) 25%, rgb(10, 3, 15) 50%, rgb(64, 69, 149) 75%, rgb(10, 3, 15) 100%); z-index: 0; animation: Scroll 4s linear infinite; background-size: 300% 200%; } @keyframes Scroll { 0% { background-position: 0% 0%; } 100% { background-position: 100% 33%; } } #gradient2 { background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(207, 204, 205) 55%, rgb(70, 9, 144) 100%); mix-blend-mode: color-dodge; } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: grid; place-items: center; width: 100%; height: 100vh; background: black; } div { grid-column: 1; grid-row: 1; } #container { padding: 1rem; height: 100vmin; width: 100vmin; display: grid; }