Linear gradient Animation for background

Hello, am trying to produce an animated background for my banner, but its not working. Can someone help me please?

Here is the reference site :

And below is my piece of code

.homepage-banner {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
@keyframes gradient {
0% {
background-position: 0% 50%;
50% {
background-position: 100% 50%;
100% {
background-position: 0% 50%;

So am getting the colors but its not making the animation effect

Hey @pooja.ramyad,

I tested your code in a CodePen, and it works fine for me. Are you still having trouble? If so, you could send all of your project files as a ZIP file or GitHub repo, and I could take a closer look.


This issue has been closed due to inactivity. Flag to reopen.