WebGL Shader Background Components for React

Shader backgrounds run on the GPU, so they can animate rich, organic motion that CSS cannot. These React components wrap GLSL shaders for liquid, gradient mesh, waves, fog, vortex and ripple backgrounds that you can place behind any section.

Animated website background ideas

Looking for an animated website background? These shader backgrounds render liquid, gradient, wave and fog effects in real time, and you can drop them behind any section.

Frequently asked questions

What is a WebGL shader background?

A small GPU program, written in GLSL, that draws every pixel of the background in real time. It is rendered into a canvas element behind your content.

Do shader backgrounds work on phones?

Yes on modern phones. Lower the resolution or pause the animation when the canvas is off screen to save battery.