Background Shader Gradient is an advanced background rendering feature for Elementor Containers.
It allows you to create dynamic, animated, multi-color gradient backgrounds with organic noise, grain, lighting, and full 3D camera control.
This feature is ideal for:
Technology or creative landing pages
Where to Find the Settings
Open your page in Elementor
Scroll down to Background Shader Gradient
Enable the Shader Gradient
Enable Shader Gradient → Set to Yes
Once enabled, all shader-related controls become available.
Control Groups and Settings
Controls the amplitude of the noise deformation applied to the gradient surface.
Higher values → stronger distortion
Recommended range: 2.0 – 3.0
Controls the scale and frequency of the noise.
Lower values → large, smooth shapes
Higher values → fine, detailed patterns
Recommended range: 0.8 – 1.5
Defines the internal render resolution of the shader.
Higher values improve sharpness but increase GPU load
Color 1 / Color 2 / Color 3
Defines the three primary colors used to generate the gradient.
Color 3 is typically used for depth, shadow, or contrast
Avoid using three very bright colors to prevent visual clipping
III. Noise & Effects
Adds a subtle film-grain overlay to reduce banding and add texture.
Grain Intensity
Controls the strength of the grain effect.
Recommended range: 0.2 – 0.4
IV. Display Settings
Adjusts the overall luminance of the shader.
Values above 1.0 increase brightness
Values below 1.0 darken the background
Reflection (Environment Intensity)
Controls how strongly the shader reacts to environmental lighting.
Higher values produce a glossier, more reflective appearance
Enables or disables shader animation.
Controls the animation speed of the gradient.
Energetic motion: 0.6 – 1.0
When enabled, the animation runs in a continuous loop.
Defines the duration of one full animation cycle (in seconds).
Recommended range: 8 – 15s
VI. View (Camera Controls)
Camera Distance
Defines the distance between the camera and the shader surface.
Lower values → stronger depth and perspective
Higher values → flatter, softer visuals
Camera Azimuth Angle
Horizontal rotation of the camera (0–360°).
Affects lighting direction and visual flow
Camera Polar Angle
Vertical camera angle.
Values above 90° simulate a top-down perspective
Rotation X / Y / Z
Rotates the shader surface in 3D space.
Rotation Z is commonly used to create dynamic flow direction
Position X / Y / Z
Moves the shader surface along the X, Y, or Z axis.
Useful for fine-tuning alignment within a layout
VIII. Advanced Camera Settings
Controls overall camera zoom level.
Values below 1.0 zoom out
Field of View (FOV)
Defines the camera’s field of view.
Lower values → cinematic look
Higher values → stronger perspective distortion
