Docs

[erwinanjc]

Hello there! So, I used this site: https://www.gradient-animator.com/ to generate a CSS gradient. With the colors and settings I chose, it created the following code:

background: linear-gradient(238deg, #1acd64, #27c99f, #4c2aa7, #3168d1);
background-size: 800% 800%;
-webkit-animation: AnimationName 37s ease infinite;
-moz-animation: AnimationName 37s ease infinite;
-o-animation: AnimationName 37s ease infinite;
animation: AnimationName 37s ease infinite;
@-webkit-keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}
@keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}

When I add this to the custom CSS area, it won’t work. The background will only change to white. Any ideas on how I can make this work? (I’m new to animated gradients and really don’t know how to make them work).

Thanks for your help! You’re an awesome team. Hope to hear from you soon 🙂

[Rupok]

Hi there,

Your code is incomplete because you haven’t applied this to any selector. Make sure to use the right selector for your CSS like :

.my-element{
  background: linear-gradient(238deg, #1acd64, #27c99f, #4c2aa7, #3168d1);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 37s ease infinite;
  -moz-animation: AnimationName 37s ease infinite;
  -o-animation: AnimationName 37s ease infinite;
  animation: AnimationName 37s ease infinite;
}

Thanks!

[erwinanjc]

Thanks so much for your answer! I see the mistake now. I’ve tried to correct it and I think that I’m doing it the right way this time, but when I insert the css code nothing changes in the page. Is there anything that could be preventing the changes from happening?

[Nico]

Hi There,

Probably you missed a symbol or something that could cause a conflict so that the CSS will not function. Would you mind sharing us your admin credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[erwinanjc]

This reply has been marked as private.

[Friech]

Hi There,

Thank you for the credentials, but would you mind to clarify which element or container you want this gradient background to apply?

I’ve try it on the body and it works. http://image.prntscr.com/image/07f9b702b38f49699bb3d81c0aa0cf35.png

Here’s my code:

body {
background: linear-gradient(238deg, #1acd64, #27c99f, #4c2aa7, #3168d1);
background-size: 800% 800%;
-webkit-animation: AnimationName 37s ease infinite;
-moz-animation: AnimationName 37s ease infinite;
-o-animation: AnimationName 37s ease infinite;
animation: AnimationName 37s ease infinite;
}

@-webkit-keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}
@keyframes AnimationName {
0%{background-position:0% 88%}
50%{background-position:100% 13%}
100%{background-position:0% 88%}
}

Cheers!

[Author]

Posts