Improving performance

[RobinAdlung]

Hi there.
Thank you for providing this library! It is very powerful and easy to use.

I am currently working on a website based live wallpaper and I am planning to use the gradient as a background.
My problem is that I cant have it take much of the performance, as I want to add 3D models with three.js on top of it.
The gradient canvas will take up the entire viewport size.
Unfortunately this stresses out the GPU a lot - even when there is no animation going on.

As I just need transitions between different gradient states at certain events and no permanent looped gradient animation, I wanted to ask if there is an option to safe performance when there is no transition running between gradients and it is just a solid gradient.

Regarding the example file:
As you can see, even though it is just a solid gradient it goes heavily on the GPU when displaying the page in Chrome.
Is there a way to resolve this issue?

Thank you very much!

[sarcadass]

Hello,
Can you please reproduce the issue on codepen or codesandbox ?
It will be easier to test on my side.
Thank you.

[metaory]

This library uses canvas 2D API

Canvas 2D

Is CPU-bound;

All rendering is done on the main thread;
It steals main thread time, and can lag other UI updates

It's imperative and has limited compositing.

It has poor fullscreen scaling

---

Here are some Animated Gradient Background Techniques

(Slowest → Fastest):

1. SVG – CPU-bound, DOM-heavy, poor scaling
2. Canvas 2D – Main-thread load, imperative updates
3. CSS Gradients – GPU-composited, limited complexity
4. WebGL – GPU-accelerated, shader-driven, optimal balance
5. WebGPU – Most powerful, but overkill for typical use

---

Facing similar issues and not finding suitable webgl solutions,

I end up with gradient-gl

A minimal WebGL library for animated gradient backgrounds. Generate unique visuals from simple seed strings.