Custom animated gradient background

[Ros_rgb]

Hi, trying to add in gradient animation made from https://www.gradient-animator.com/
to live on a category page background.

I have this code, any help to embedd to page? Many thanks

background: linear-gradient(181deg, #20c399, #e88a06, #ef5bff, #487de8);
background-size: 800% 800%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
-o-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
@-webkit-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@keyframes AnimationName {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}

<script src="https://gist.github.com/anonymous/48a837b43c17d200fcc33a1cbbaaaab8.js"></script>

[mariusjopen]

Hi @Ros_rgb
you do not need jQuery for this.
You could do it in pure CSS - I am sure.

Also be aware of this – when you use Javascript:
http://laytheme.com/documentation.html#custom-javascript

Can you post a link to your website that we can have a look?

All the best!

Marius

[Ros_rgb]

Thanks for replying armin

I think I made a version we are happy with for now. Background image set and repeated.

http://www.notasausage.co.uk/projects
I really don't have the knowledge to get into trying to code it.

Ross

[mariusjopen]

Hi @Ros_rgb
Thats cool!

I like it a lot!

All the best!

Marius