Streaming live at 10am (PST)

Need help with adding an animated gradient background code


#1

Hi, please help with adding code for my background to animate like on the link below.

https://www.gradient-animator.com/

How can I embed the code into my website?

Thanks in advance.


#2
  1. In the designer add a new class to the element you'd like to have the gradient animation.
  2. Go to the Settings area and go to the custom code tag.
  3. In the Head Code field Create your opening and closing style tags:
  4. Your code will go between these tags.
  5. The the first part of the gradient animator code you've generated are only the CSS style declarations. It does not include the selector. You need to wrap the style declarations in a CSS selector.

Example:

<style>
.your-class-name {
    -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%}
}
</style>
  1. You can change AnimationName to something that makes sense.
  2. Hit Save Changes, then Publish.
  3. Your new custom code won't be visible in the Designer or Preview, but it will be visible on the published site.

#3

Hi, Sarah.

Sorry, but I can't get this to work. Could you give me some help? This is my code:

<style>

background: linear-gradient(270deg, #15ca9b, #46c9d7, #c18bf5);
background-size: 600% 600%;

.gradient {
-webkit-animation: backgroundfade 30s ease infinite;
-moz-animation: backgroundfade 30s ease infinite;
animation: backgroundfade 30s ease infinite;
}

@-webkit-keyframes backgroundfade {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes backgroundfade {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes backgroundfade { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
</style>

https://preview.webflow.com/preview/pedro-pellicano-s-supercool-site?preview=32a0486cf7ecf6fc6b180a0457a751db

Thanks! :slight_smile:


#4

Sure!

I'd need to see the published site in order to debug. But at first glance, those first two lines need to be applied to a class.

So just include it in here:

.gradient { 
     background: linear-gradient(270deg, #15ca9b, #46c9d7, #c18bf5);
     background-size: 600% 600%;
        -webkit-animation: backgroundfade 30s ease infinite;
        -moz-animation: backgroundfade 30s ease infinite;
     animation: backgroundfade 30s ease infinite;
}

Let me know if it doesn't work - if it doesn't, it'd be nice if you could publish it so we could see what's up.


#5

Haha, of course!

Sorry, thanks a lot for the quick response. :slight_smile:

http://pedro-pellicano-s-supercool-site.webflow.io/

PS. F* amazing! Loved this! (sorry, lol).

Cheers!


#6

Oh...I think it's the scroll angle in that generator!
If the scroll angle is perpendicular to the gradient angle, it won't be scrolling the right way.

Use 270deg in the linear-gradient

And in the keyframes, use these:
0% 50%
100% 51%
0% 50%


#7

http://pedro-pellicano-s-supercool-site.webflow.io/

:slight_smile:


#8

I LOVE those colors! Yay!


#9

Gonna make it my pet project I think, lol.

(click on the hamburger menu)
http://pedro-pellicano-s-supercool-site.webflow.io/

Pedro M. Pellicano - Mkt & Graphic Design
Portfolio - https://www.behance.net/pellican
Skype - mrpellican | | Phone - 5511 98270.7723


#10