Infinite Gradient

HTML
<h1>Infinite Gradient</h1>
SCSS
@mixin gradient-linear( $color1, $color2: $color1, $color3: $color1, $color4: $color1, $color5: $color1, $color6: $color1, $color7: $color1, $color8: $color1 ) { background-color: $color1; /* Old browsers */ background-image: -moz-linear-gradient(left, $color1 0%, $color2 12.5%, $color3 25%, $color4 37.5%, $color5 50%, $color6 62.5%, $color7 75%, $color8 87.5%, $color1 100%); /* FF3.6-15 */ background-image: -webkit-linear-gradient(left, $color1 0%, $color2 12.5%, $color3 25%, $color4 37.5%, $color5 50%, $color6 62.5%, $color7 85.5%, $color8 87.5%, $color1 100%); /* Chrome10-25,Safari5.1-6 */ background-image: linear-gradient(to right, $color1 0%, $color2 12.5%, $color3 25%, $color4 37.5%, $color5 50%, $color6 62.5%, $color7 75%, $color8 87.5%, $color1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } @keyframes gradientAnim { 0% { background-position: -5% 0; } 100% { background-position: 105% 0; } } * { box-sizing: border-box; } body { height: 100vh; width: 100vw; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; @include gradient-linear(#f23064, #ad2ee8, #6728d3, #2acbe0, #67f230, #67f230, #e2e22b, #ce8027); background-repeat: no-repeat; background-size: 2000% 400%; background-position: 0 0; animation-name: gradientAnim; animation-iteration-count: infinite; animation-delay: 0; animation-duration: 60s; animation-timing-function: linear; } h1 { color: #fff; font-family: 'Delius Unicase', cursive; font-weight: 100; font-size: calc(100% + 5vmax); }
JAVASCRIPT
Expand for more options Login