fbpx

How to create background gradient animation in Divi?

by | Aug 20, 2020 | Tips & Tricks, Tutorials

Have you ever noticed how a background gradient animation can enhance the beauty in a section background? It can help you to create a stunning background scenario. It seems that background color comes to life on a website. So it can be a great design technique to design a background. You could have been seeking on the internet on how to make this outline. However, the execution of the design is really easy. So no doubt, I am going to discuss how to make a gradient background animation with CSS Snippet on Divi. 

The purpose of this article is to make a clear sense of the gradient background animation. Therefore you can design your desired background. So we are going to implement this design technique. 

We are going to recreate the Elementary School Home layout hero section with a gradient animation on it. Let’s get started on the design.

Some Requirement to start:

We need some basic requirements to begin the sketch. Such as-

  1. Install and activate the latest version of Divi Theme.

Design Technics:

Here I am implementing this to a full-width section. You can use it on a section, column, raw, and any module. All you need is to add the CSS ID (mentioned below) on your column, raw or modules, and add a gradient. 

To get started create a new page and Choose build from Scratch. Or insert a section on your existing page.

Section Settings:

Open the section settings, then select a gradient background under the content tab. In my case, I took the Gradient background as follows. You can choose on your own.

  • Gradient Background Left Color: #fe7355
  • Gradient Background Right Color: #2d1168
  • Gradient Direction: 45deg
  • Rest of the settings default.

In the Design tab,

  • Divider Top style: Last one (See Image)
  • Divider color: rgba(255,255,255,0.06)
  • Divider Height: 30%

Now insert a fullwidth header module into your full-width section.

Module Settings:

Here I chose the “fullwidth header module” to design the Module. You can choose any modules depending on your choice. 

Content Tab:

First of all, we will add a title, subtitle, some content into the body area, and delete the default text from the button area. Then we will jump onto the background and delete the preloaded background color and select the background image this one. Then select-

  • Background Image Size: Fit
  • Background Image Position: Bottom Center.

Design Tab:

Now It’s time to design our module. You can design it on your own. I am going to design as follow:

Layout design

Under the design tab set text and logo alignment center.

Title text design

Under the design tab, update the settings as follows:

  • Title Heading Level: H3
  • Title Font: Rubik
  • Title font-weight: Bold
  • Title font style: Uppercase
  • Title text color: #000000
  • Title text size: 16px
  • Title Letter Spacing: 5px
  • Title Line Height: 2em

Body text design

Under the design tab, update the settings as follows:

  • Body Font: Rubik
  • Body text size: Desktop 18px Tablet 18px Mobile 16px
  • Body Line Height: 2em

Subtitle text design

Under the design tab, update the settings as follows:

  • Subtitle Font: Rubik
  • Subtitle font-weight: Bold
  • Subtitle text size: Desktop:50px, Tablet:50px and Mobile: 30px
  • Subtitle Line Height: 1.4em

Spacing options

Now jump on to the spacing area and set padding as follows:

  • Padding: Top 5vw bottom 20vw

Box Shadow settings:

Update the settings as follows:

  • Box Shadow: See image
  • Box shadow vertical position: -10px

The rest of the things keep as default.

Everything has been set now except for the Background Animation. Now, we will add the CSS for the Gradient Background Animation.

The paramount object of this article is to style of the Gradient Background with the snippet of CSS. At this point, our Gradient Background Color has already been picked.

Custom CSS:

Since we will include the CSS to make the Gradient Background Animation. Hence we must have to declare an ID from the section setting’s Advanced Tab.

  • CSS ID: bg-animate

The key part of this design is to add the CSS for the gradient background animation. So we are going to apply our CSS by targeting the specific CSS ID of the section. We will use the below CSS at the Divi Theme option.


#bg-animate {
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

If you have some familiarities with the CSS, you can change the animation properties, for instance, starting and ending points and also animation duration as you want.

Result:

Now you can see the desired result. The animation has started to animate at the background of the section. Since we selected the Gradient Type as a linear, So it creates an image consisting of a progressive transition between two colors along with a straight line. Earlier, we also select Gradient Direction 45deg. The left gradient color starts from the bottom left with an angle of 45 degrees, and the right gradient color starts from the top left with about an angle of 45 degrees.

Summarization:

In this article, we apprehend that how to create a background gradient animation in a section by using CSS. Hopefully, you will implement this technique on your websites.

Be Surprised.