component
ShaderBG
By Rivii

Details
- RiviiAuthor
- componentType
- 2026-07-27Published
- 2026-07-27Updated
- 2026-07-27Added
- BackgroundsCategories
Summary
Description ShaderBG renders a continuously animated gradient pattern directly in the browser using WebGL.
Description
A living, animated shader background for your hero sections - no video files, no Lottie exports, just a lightweight WebGL canvas that drifts and glows in real time. Description ShaderBG renders a continuously animated gradient pattern directly in the browser using WebGL. Drop it behind any hero, header, or feature section and stack your own text, buttons, or layout on top. Fully responsive, GPU-accelerated, and tunable without touching a single line of code. Features Real-time WebGL shader animation, no video or image assets required Adjustable Speed, Scale, and Glow to shape the motion and intensity RGB Tint control to shift the color palette to match your brand Device pixel ratio cap for performance on high-density displays Custom clear color for light or dark canvas bases Fills any frame - resize freely, fully responsive Use cases SaaS and AI product landing page heroes Portfolio and agency intro sections Event or launch pages that need a "living" feel Backgrounds for pricing, CTA, or newsletter sections Notes Best used as a background layer with content stacked above it in the layer panel. Works on any dark or light base; use the Tint and Clear Color controls to match your site's palette.
Introduction
An animated shader background.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1615