.bricks-background-primary{ position: relative; z-index: 0; } .bricks-background-primary:before { background: linear-gradient(-45deg, #FF982F, #FF7428, #FF982F, #FF7428); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100%; position: absolute; content: ""; top: 0; left: 0; width: 100%; z-index: -1; transition: all 0.5s; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bricks-background-primary:hover:before, .bricks-background-secondary:hover:before { opacity: 0; } .bricks-background-secondary{ position: relative; z-index: 0; } .bricks-background-secondary:before { background: linear-gradient(-45deg, #2eb371, #057852, #009472, #057852); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100%; position: absolute; content: ""; top: 0; left: 0; width: 100%; z-index: -1; transition: all 0.5s; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }