.animated_background { background: linear-gradient(229deg, #4bb1c1, #8525d7, #d76d25); background-size: 600% 600%; -webkit-animation: AnimationName 24s ease infinite; -moz-animation: AnimationName 24s ease infinite; animation: AnimationName 24s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} } @-moz-keyframes AnimationName { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} } @keyframes AnimationName { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} } .day { width: calc(100% / 7); height: 20px; border: 1px solid #ccc; box-sizing: border-box; } .heatmap { display: flex; flex-wrap: wrap; }