A Shader background is a moving gradient drawn behind a section's content, in two colors from the site's palette. It suits bold heroes for tech, creative, music, fitness and other modern brands. An overlay sits between the gradient and the words, so text on top never drops below the 4.5:1 contrast that readable text needs.
How to turn it on
- Click the section (or a column or box) on the canvas to open its Design panel.
- Open Shader background and switch on Shader background behind the content.
- Pick a Preset and adjust the settings below. The gradient covers the section's photo or video background.
Settings
- Preset: Aurora (soft bands of light), Liquid (flowing marble), Lava lamp (slow blobs) or Mesh gradient (soft color fields).
- Color 1 and Color 2: empty uses the theme's primary and secondary colors, so the gradient follows the theme.
- Speed: 0.25× to 2×.
- Intensity: how strongly the colors show, 0 to 100%.
- Overlay darkness: 0 to 95%. Under light words the overlay is dark; under dark words it's white.
- Preview motion while editing: off keeps one still frame on the canvas while you edit. Preview always plays it.
Text stays readable
Under the settings, the panel shows the lowest text contrast at the brightest point the gradient can reach. When the words would fall below 4.5:1 (3:1 for large headings), the overlay is raised automatically and the panel says so, for example "Overlay raised to 62%". To show more color, use darker or lighter colors, lower the Intensity, or make the words bigger.
Good to know
- The gradient only moves while the section is on screen, and it's drawn at a reduced resolution, so it stays light on phones.
- Visitors who ask their device for less motion, and anyone who uses Pause motion, see a still frame. A page with a Shader background shows the Pause motion control.
- Use one per page, usually on the hero. Don't combine it with a Cursor Trail, a Media Vortex or a particle widget in the same section.
- Zeus can add it too: ask "add a shader background to the hero" in the editor chat. Create with Zeus can choose it for a bold home hero.