Background Shader Gradient

User Documentation

Overview

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:

• Hero sections

• Technology or creative landing pages

• Premium brand visuals

• Modern UI backgrounds

Where to Find the Settings

• Open your page in Elementor

• Select a Container

• Go to the Style tab

• 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

I. Shape (Noise & Form)

Noise Strength

Controls the amplitude of the noise deformation applied to the gradient surface.

• Higher values → stronger distortion

• Recommended range: 2.0 – 3.0

---

Noise Density

Controls the scale and frequency of the noise.

• Lower values → large, smooth shapes

• Higher values → fine, detailed patterns

• Recommended range: 0.8 – 1.5

---

Pixel Density

Defines the internal render resolution of the shader.

• Higher values improve sharpness but increase GPU load

• Recommended:

  • Desktop: 1.0 – 1.5

  • Mobile: 0.8 – 1.0

---

II. Colors

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

Grain

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

Brightness

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

---

V. Motion

Animate

Enables or disables shader animation.

---

Speed

Controls the animation speed of the gradient.

• Subtle motion: 0.2 – 0.4

• Energetic motion: 0.6 – 1.0

---

Loop

When enabled, the animation runs in a continuous loop.

---

Loop Duration

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.

• 90° → straight-on view

• Values above 90° simulate a top-down perspective

---

VII. Transform (3D Orientation)

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

Camera Zoom

Controls overall camera zoom level.

• Values below 1.0 zoom out

• Values above 1.0 zoom in

---

Field of View (FOV)

Defines the camera’s field of view.

• Lower values → cinematic look

• Higher values → stronger perspective distortion