Skip to content
Sign in

WebGL Shaders for React and Tailwind

Shaders draw on the graphics card, which is how a page gets real light, liquid and grain that plain CSS cannot fake. They can also drain a battery, so watch what each one does to the rest of the page. Look for a still fallback and settings for speed and colour. Install one as code you own and pause it when it scrolls out of view.

Shader Lens Blur
Shader Lens Blur

About WebGL shaders

WebGL shaders draw effects on the GPU that HTML and CSS can't: flowing gradients, lens blur, dithering, liquid metal, noise and light that react to the pointer. They usually render into a canvas behind or inside a section.

Shaders are powerful and costly, so use one where it earns its place, often the hero. Check them on an older phone and a laptop on battery, pause them off screen, and keep a still fallback for devices without WebGL.

Frequently asked questions

Render a canvas, create a WebGL context, and draw a full screen quad with your fragment shader, updating a time uniform each frame. Shader components here package that, so you pass colours and speed as props.

Most modern phones run them, but they use battery and can get warm. Keep the resolution sensible, pause the shader when it's off screen, and offer a static image where WebGL isn't available.

A CSS animation moves or recolours existing elements. A shader computes the colour of every pixel on the GPU, which allows noise, light, liquid and lens effects that CSS can't draw.

Yes. Pass the pointer position to the shader as a uniform and use it in the drawing, for example to bend light or move a lens. Smooth the value so the effect doesn't jitter.

Write a fragment shader that mixes a few colours with smooth noise that moves over time, and draw it on a canvas behind the section. It gives a richer, slower gradient than CSS can.

No. A small shader can run on a plain WebGL canvas with a few dozen lines of setup. three.js or a shader library helps when you need 3D scenes, textures or many effects.

Check prefers-reduced-motion and either stop updating the time uniform, so the shader shows a still frame, or slow it down a lot. A still frame of a good shader still looks finished.

Explore more