Applying animated gradient to backgrounds

[alidarosie]

Hi Armin,

Still really loving Lay Theme! I'm just wondering if you could please give instructions for adding an animated gradient background via https://www.gradient-animator.com/ ? I have seen a few topics discussing this but cannot find clear instructions for how to do it.

I understand it can be done via CSS but tried to copy and paste code into CSS editor and it doesn't work. I'd like to apply the gradient to selected pages of my site.

Thank you!

[mariusjopen]

Dear @alidarosie
Can you post a link to our website?
Then we can have a look and inspect that.

You would probably need to paste it into the body tag.

Best!

Marius

[alidarosie]

Thank you for your reply Marius - I actually managed to do it using CSS! For anyone who may find it useful, here is how I entered the code in custom CSS:

body.slug-pagename {
background: #eaffff;
background: linear-gradient(270deg, #ffffff, #eaffff, #fdffeb);
background-size: 800% 800%;

-webkit-animation: gradient-title 21s ease infinite;
-moz-animation: gradient-title 21s ease infinite;
animation: gradient-title 21s ease infinite;
}

@-webkit-keyframes gradient-title {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes gradient-title {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gradient-title {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

[mariusjopen]

Dear @alidarosie
ah great!

Glad you shared it!

Thank you!

Best!
Marius