FAQ

Which browsers work?

All of them. Each gradient uses WebGPU when the browser has a hardware GPU device, and WebGL2 otherwise. Both draw the same frame. A browser with neither keeps the CSS gradient that the server rendered behind the canvas.

How do I force WebGL2 or WebGPU?

Add ?gradient-backend=webgl2 (or webgpu, or auto) to the URL, or set it from code before gradients mount:

import { setBackendPreference } from "@/lib/gradient-engine/webgpu";

setBackendPreference("webgl2", { persist: true });

What does a gradient cost?

About 50 KB of gzipped JavaScript for the first component, the surface and the engine. Each extra component adds a few KB. The engine keeps the GPU cost down for you:

• Gradients off screen or in a hidden tab stop drawing.
• The canvas renders at no more than 1.5× device pixels. Lower maxDpr for full-screen gradients on slow devices.
• A page runs at most 8 WebGL2 contexts or 16 WebGPU surfaces, nearest first. Under heavy load, gradients render at a lower internal resolution, then drop to 30 fps.

Two or three moving gradients per page stay well inside the budget. Test on a real phone, not desktop emulation.

What about reduced motion?

Visitors who prefer reduced motion see one still frame. Pass reducedMotion="ignore" only for a gradient that must move, such as a loading indicator.

Will it cause layout shift?

No. The server renders each gradient's colours as a CSS background in the final size, and the first GPU frame replaces it in place.

Can I use it in commercial work?

Yes. The free components and the engine are MIT licensed. Pro includes a commercial license for Pro components, Pro presets and exports, for your own products and client work. You can't resell or publish the Pro source or presets. The full terms are on the license page.