On one of my hero section templates, I added a noisy gradient background to a column to give a retro touch to the design. Well, the end result was not retro enough. But I managed to avoid a flat design on that hero.
There is no instant method to create a noisy gradient in Elementor. While Elementor already has a built-in feature to create the gradient background, it takes an external tool to add the noise effect.
If you are interested in creating a noisy gradient on your Elementor project, I have documented my steps in creating mine which you can read below.
The video version is also available to make it easy for you to follow the steps.
Shortcuts ⤵️
Want to add a premium vibe to your Elementor design? Use our button hover effects collection.
Understanding the Core Steps
The logic is quite simple to create a noisy gradient background in Elementor and it involves only two core steps.
First, you create the gradient background. Second, you add an extra layer above the background and add a transparent image, which is the noise texture/effect in this case.
Here are the detailed steps:
Steps to Create a Noisy Gradient Background in Elementor
Step 1: Create the Gradient Background
As I mentioned, the very first step you need to do to create a noisy background in Elementor is to create the gradient itself.
Elementor already has a built-in setting option to create the gradient background. You can use it if you want to. To do so, first, edit the container/section/column you want to add the gradient background to. Go to the Style tab and open the Background settings block.
Next, go to the Gradient tab and create the gradient.
By default, you can add only the maximum of two colors on your gradient. In Elementor v4, you can't even add a gradient background (maybe not yet).
So, what if you want to create an advanced gradient background consisting of multiple colors (more than two)?
You can use an external gradient generator tool.
Creating an Advanced Gradient
There are a bunch of free tools that you can use to create an advanced gradient. Here are some of them:
In this example, I will demonstrate how to use Mesher by CSS Hero to create a mesh gradient.
First, visit this page to access the CSS gradient tool from CSS Hero. Once you are there, you can press the space key on your keyboard to generate a new mesh gradient.
Once a new mesh gradient is generated, you can customize the color on the right panel. You can also set the position of the colors by dragging the dots on the gradient prevew area.
Once you are done setting the gradient, you can click the Export button on the bottom-right corner to generate the CSS code of the gradient.
Next, you can click the Copy to clipboard button to copy the CSS code of the gradient.
Once the CSS code is copied, you can apply it to your Elementor design.
Applying the Gradient in Elementor Pro
If you are on Elementor Pro, you can instantly apply the gradient by pasting the CSS code to the Custom CSS field editor under the Advanced tab.
First, select the container/section/column you want to apply the gradient to. Go to the Advanced tab on the settings panel and open the Custom CSS block.
Type selector{} and paste the CSS code you have copied inside the curly brackets and should find your gradient turns into a gradient.
If you use Elementor v4, you can directly paste the CSS code without using selector as the prefix.
Applying the Gradient in Elementor Free
If you don't have Elementor Pro, no worries. You can still apply the gradient you have just created using the HTML widget.
First, add the HTML widget to your design. You can place it anywhere. Be it to the same container/section/column or to a different container/section/column.
Once the HTML widget is in place, type the following code:
<style>
.my-mesh-gradient{}
</style>
Then, paste the CSS gradient inside the curly brackets and copy the class selector.
Next, go to the container/section/column you want to apply the gradient to and open the Advanced tab on the settings panel. Paste the CSS class to the CSS Classes field.
Step one is done. You can move on to the next step to add the noise effect.
Step 2: Create the Noise Effect
In this step, you need to use an external tool because Elementor has no built-in feature to create the noise effect.
You can use any tool to create the noise effect. Including popular image editing tools like Photoshop and GIMP.
One crucial thing. The image for the noise effect should be transparent. Which means, you can't use the JPG format. Instead, you can use either PNG or WebP which supports transparency.
The easiest way to create the noise effect is by using a free tool called Noise Texture Generator.
First, visit the Noise Texture Generator website. Set the noise opacity and noise density. Set the background to transparent and set the dimension of the image. You can use any dimension for the image. The rest (like image position and size) can be set in Elementor.
Click the Download now button to download the image of the noise effect.
The noise image is ready. Next, you can apply it to your gradient.
Applying the Noise Effect
To apply the noise effect you have just created above, first, select the container/section/column in which you have created the gradient on step 1.
Go to the Style tab and open the Background Overlay settings block.
Click the Classic tab and then click the plus icon to select the image file of the noise effect you have just created.
If you use a small dimension for your image (which is recommended), you can set the Repeat option to Repeat. You also set the opacity of the image to set the transparency level of the image.
And that's it. You have successfully created a noisy gradient background in Elementor.
Video Version
I also created the video version of this tutorial, which you can watch on YouTube. You can also watch the video on this below.
Summary
The logic to create a gradient background in Elementor is quite simple. First, you can create the gradient background. Be it using Elementor's built-in feature or using an external tool
Second, you can add an extra layer above the gradient background and populate it with the transparent image of the noise effect. In Elementor, you can add the extra layer by setting the background overlay.
To make it easy to create the image of the noise effect, you can use Noise Texture Generator, which is designed specifically for this matter.