Hm no…
Best is you just add it to the page-id in question in the Custom CSS section of Lay.
Somewhat like the example below:
/* Animated Bckg Gradient*/
body.type-page.id-13 {
background: linear-gradient(270deg, #f70000, #0067f7);
background-size: 400% 400%;
background-attachment: fixed;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s 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%}
}
Inside body.type-page.id-13
the id–Number should be the one of the page you want the animated gradient to be applied to. You can find out how to do so over here in the section CSS based on current page.
I added the background-attachment: fixed;
to make the gradient stay in place while scrolling – it feels better that way but you could delete that line if you so desire.
If the gradient doesn’t seem to fill you whole page you may want to experiement with the background-size: 400% 400%;
and raise the number to e.g. background-size: 1200% 1200%;
or the like.
Of course:
replace all the keyframes and color codes, speed etc variables with the ones you prefer. (the stuff from the generator)
Hope that helps!!
Optional:
You can rename AnimationName
however you want the gradient class to be named.