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);
}
