Skip to content
Musterli
Support
Gradients

Shader Gradient

Liquid, silky and grainy gradients from a GPU shader. With domain warping, Bayer dithering, grain and vignette. PNG, JPG and WebP up to 8K, plus seamless GIF loops.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Shader Gradient

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A shader gradient is a gradient computed by a small program right on your graphics card. Instead of a few fixed color stops, it builds a living field of noise, bends it with domain warping and then runs it through your colors. The result is liquid, silky or grainy backgrounds that need no image as a starting point. Musterli renders everything in your browser, nothing leaves your device.

How it works

Pick a style such as Liquid, Silk or Aurora and choose two to six colors. Shape the field with frequency, warp and angle, then give it a surface with grain, vignette and Bayer dithering. Press Space for new colors and a new shape. The moment slider picks the still frame for exports. Then export a PNG, JPG or WebP up to 8K, or a seamless GIF loop.

Try the Shader Gradient now

FAQ

Do I need a special graphics card?
No. Any current browser with WebGL2 will do, and Chrome, Edge, Firefox and Safari have supported it for years. If WebGL2 is missing, for example because hardware acceleration is turned off, Musterli shows a notice instead of an empty area.
Does the export look exactly like the preview?
Yes. Preview and export run the same shader with the same values. Musterli renders large exports up to 8K in tiles, and grain and dithering stay exactly where they are in the preview.
What does Bayer dithering do?
It reduces the gradient to a few color steps and spreads the transitions in a regular dot pattern. That gives a retro look like old computers and printers, and it prevents visible banding in soft gradients.
Can I use the gradient as an animation?
The GIF export draws a seamless loop whose first frame is exactly your still image. The preview moves at the speed you set, unless you have turned on reduced motion in your system.
Does the same gradient always look the same?
Yes. The noise depends only on the seed and your settings. A share link or a saved design gives the same picture on every device.

Ready-made gradients

More than 30 original gradients with CSS to copy, each one ready to adjust in the editor.

Browse the gradient collection

Related generators

All generators in Gradients