Adding a grainy filter, also known as a noise effect, to a gradient background can substantially enhance the composition and texture of the design. By introducing subtle variations in color and tone, the noise effect mimics the natural imperfections found in real-world surfaces. It creates a sense of depth and authenticity.
To bring this concept to life on your website, this tutorial will guide you through the process of adding a noise effect to a gradient background for the designated element of your choice. Using Elementor’s custom CSS feature.
Adding Noise Effect to Gradient Background in Elementor
Elementor Pro users have the advantage of seamlessly integrating custom CSS into their websites. Whether they wish to apply it to specific elements or the entire site. On the other hand, those utilizing the free version can still implement custom CSS by referring to our previous article that covers adding custom CSS for Elementor free version in detail.
Step 1: Get the Gradient CSS
While Elementor does offer a built-in background gradient feature, it is limited to gradients with only two colors. Although certain elements like sections and containers allow for the addition of two more colors to the gradient through Background Overlay, further color expansion is not supported within the Elementor interface.
To incorporate a broader spectrum of colors into your gradient, you can generate gradient CSS using gradient CSS generator sites. CSS Hero is one such site where you can mix your gradient using the Mesher tool.
Once you’re satisfied with the gradient mix, click the Export button and then click the Copy to clipboard button to copy the gradient CSS.
Step 2: Get the Noise Effect
For the noise effect, there is a filter in SVG called <feTurbulence>. This filter generates an image known as Perlin noise, a type of noise gradient, without requiring any input image. Below is the HTML code for implementing the noise filter within an SVG.
<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.65'
numOctaves='3'
stitchTiles='stitch' />
</filter>
<rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>
However, you won’t be utilizing this HTML code directly; instead, you’ll incorporate it into your custom CSS. You can access the grainy gradient playground provided by Vercel, where you can adjust the noise baseFrequency and SVG size settings according to your requirements.
Once you’ve got the desired noise effect, click on the Inline the SVG then copy the url line from the generated CSS snippet.
Below is the copied inline data URL from the generated CSS code for the noise effect.
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
Step 3: Add the Noise Effect to the Gradient
Now that you have the gradient CSS and the noise URL data, it’s time to apply them to the element of your choice. As a demonstration, we will add the combined gradient and noise effect CSS generated from the previous step to the background of a container.
Navigate to the Custom CSS block under the Advanced tab in the container settings then paste the following custom CSS on the provided editor.
selector{
/* Combine noise filter with your existing gradients */
background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
Once the CSS is applied, the noise effect becomes immediately evident within the gradient displayed inside the Elementor editor. This custom CSS seamlessly integrates the gradient styling with the noise effect URL data. Effectively incorporating it as a background image for the targeted element, such as the container in this instance.
Additional Steps
Adjust the Contrast and the Brightness
To enhance the intensity of the color, you have the option to fine-tune the contrast or brightness of the background by incorporating a filter into the custom CSS. Simply insert the following line before the closing bracket of the selector (“}”).
filter: contrast(170%) brightness(100%);
Feel free to modify the values of contrast or brightness as needed to achieve your preferred outcome.
Adjust the Width and Height
Furthermore, if you desire to customize the dimensions of your container, you can specify them by including the following CSS line before the closing bracket of the selector (“}”).
width: 1280px; height: 720px;
Adjust the values and units (such as changing from pixels to viewport height, for instance) of the width and height according to your design requirements.
The Bottom Line
Learn how to elevate your website design with a grainy filter, enhancing texture and depth through subtle color variations. Follow this tutorial to seamlessly integrate a noise effect into your gradient backgrounds, adding authenticity and visual appeal to your Elementor elements with custom CSS.
