How to add animated background gradients

 

Video Transcript

Hello, and welcome to LiveCanvas.

In this video, we're gonna show with a quick example how we can use animated gradients to spice up your web page, just using CSS, without adding any JavaScript.

We're going to illustrate how to replicate this section, which is actually a nice hero section with an animated background gradient.

Let's start by creating a new page from scratch.

Now let's add a new section. I'm going to use the readymade section called “cover with background image” to get started.

And then I'm going to open the code editor and remove the background image.

It doesn't look great right now - let's just add a BG DARK bootstrap class to the entire section, to highlight it and check that we are targeting the right element.

So basically now we just need to add a cool background gradient to the first element. How to do it?
There are many free online tools to easily generate all kinds of different CSS effects.

We’ll be using this one, called “animated gradient background generator dot netlify dot app”, which is really nice.
You can set your own colours or you can just randomize and wait for the perfect combination that you enjoy the most.

So, maybe I want to use this one.
Just scrolling down, we have the CSS code defining the class for this gradient and the background animation.

So I’ll just click the button to copy the generated code, then Go back to our webpage and paste the CSS code in the CSS tab.

Sorry, here we had some other example code in here, let’s get rid of it, and paste the CSS code of the background gradient we chose.

We also need to copy this class name and put this in place of BG dark in the HTML code to make it work.

Ok, now it looks quite nice and it’s been really easy!

Hope you enjoy Thanks for watching. Goodbye.