Animated Gradient CSS

Greetings!

Ive been trying to figure out how to replace the blue background on my front page the with this css code https://codepen.io/P1N2O/pen/pyBNzX but I cant figure it out!

Please help a noob out!


Here is my site Read-Only: https://preview.webflow.com/preview/shineonagency?preview=85b2c5051e6f068d4d691eafd33baa1d

https://www.shineon.marketing

1 Like

Hi, @Shine-On!! I’ve got it! Check it out here (it’s cloneable!!!) :

https://webflow.com/website/css-animated-gradient?s=css-animated-gradient

There’s custom code you’ll need in the header. Have fun!

2 Likes

First of all let me thank you for helping me out bud.
I cloned it and it created a new project. I tried to compy the body but it didnt let me so i just copied the Hero Section element to my own project. Where do I put it?

Also I want to add more colors to it, how can I do that?

Thanks in advance!

Hello @Shine-On

I created a very simple version of this using only Webflow animations and no custom code, you can take a look at the project here:

You can always add more gradients, change sizes, duration times, etc. Hope this helps.

1 Like

Hey, @Shine-On - happy to help! You can see @aaronocampo has you covered with a purely Webflow based option.

But if you want to use the codepen version, I simplified it to make it easier. Just copy this code and paste it into the custom code header of the home page where you want the effect:

<style>

.intro-banner {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
	background-position: 0% 50%
}
50% {
	background-position: 100% 50%
}
100% {
	background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
	background-position: 0% 50%
}
50% {
	background-position: 100% 50%
}
100% {
	background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
	background-position: 0% 50%
}
50% {
	background-position: 100% 50%
}
100% {
	background-position: 0% 50%
}
}

</style>

Then go remove the styles on your section by option-clicking the paint can next to the background color (note: you’ll have to remove the combo class).

There are four hex colors at the top of the code, just change them out to change the colors.

3 Likes

@Shine-On - did a quick recreate of your hero section and made a video to show you. Might be easier!

2 Likes

Hey, Ben! This is Mike Albright from Down In Front; I’ve tried to contact you about my website that you host several times in the past week alone by email, your website, Twitter, Facebook, and a mutual friend and you haven’t responded, and I’ve tried repeatedly to get in touch with you with nothing from you since December of 2016. Please respond to any of the messages I’ve sent you.

Hey, Mike! I e-mailed your wife who messaged me through my website! Check it out!

Thank you, Ben; I will do that.

You made my day man thank you!

1 Like

Happy to help!! :slight_smile:

Thank you so much man! Could you tell me where I should place this?? Screenshot - 7ace1e108f2881f2a9c5ed47cbec0847 - Gyazo (I put it in the top bar)

Just 2 last questions Riley, how can I add the same effect to these 2 elements? Screenshot - 8f37cb65e0a30ccce79a05f21bf30e98 - Gyazo
Screenshot - 109de1de6a4e2d3f20a0e8ceeba47fcf - Gyazo

and

How can I make this an automatic carousal slideshow (like automatic rotating of the brand logos)

Many many thanks!

1 Like

Hi, @Shine-On! This is how I accomplished it. It would be better if there was one class that used this code so you didn’t have to repeat it. But, this will do it and will allow you to customize gradient colors across the different instances.

Im gonna give it a try! ANy idea about the carousal thing I mentioned?

Yes! Must have missed that. Sorry! Give me just a bit and I’ll show you how to make it happen !

Take your time my man!

1 Like

Ok, so the easiest way to approach this for me was just to build it and make it cloneable. Then you can copy and paste and use it, but also, you can inspect everything and see how it was setup. Go grab it here:

https://webflow.com/website/client-logo-slider?s=client-logo-slider

Hope that helps!

Man I’ve never been this happy about joining this forum! Thank you so much for your help!

Is there a way to have it constantly moving?

And btw how can I remove the dots?

1 Like

@Shine-On - so glad you feel that way. This forum is filled with awesome and helpful people! So to answer your questions: Yes, there is. And it looks like you have it set up to do so. Infinitely loop, that is. If you want a constant horizontal scroll, that’s a doozy of an animation to set up and loop! I read a great discussion on this topic not too long ago. Granted this wasn’t horizontal scrolling, but the same concepts would apply:

To get rid of the navigation dots at the bottom, follow along with this video:

2 Likes