Build a moving gradient background that runs on the graphics card instead of a video file. Choose four to six colors, a style, speed, scale, softness, grain and angle, and watch it live behind a sample hero section. Then copy a self-contained React component or an HTML snippet, or download a PNG and a CSS fallback for places where motion does not belong.
Flowing mesh is the safest choice for a hero behind text. Each color is a soft point that drifts slowly, and the colors blend by distance, so you get large calm areas with gentle transitions. It is the look most people mean by a mesh gradient. Raise softness for wider, blurrier blends and lower it to see each color as a more distinct pool.
The ramp styles run your stops in order from first to last. Waves gives rolling bands, liquid folds the colors through warped noise like ink in water, grain noise uses large slow clouds that suit a matte, printed look, and plasma layers sine waves for a more graphic feel. Aurora treats the first color as the night sky and draws the later colors as a glowing curtain, so start it with a very dark stop.
Save the export as ShaderGradient.tsx and wrap your hero in it: put your heading and buttons inside as children and give it a height through className or style, for example a min-height of 80vh. The canvas sits behind the children and fills the wrapper. The component works with Vite, Next.js (it uses effects, so it renders on the client) and any other React 18 or later setup. The settings live in the CONFIG object at the top, so you can change colors or speed later without coming back here.
In plain HTML, paste the snippet where the hero should go and put your content inside the inner div. Every element with the shader-gradient class on the page gets its own canvas, but one animated background per page is plenty.
Gradients on screens often show visible steps, called banding, because each color channel has only 256 levels. The shader adds a fixed, invisible dither of under one level per pixel, which breaks up those steps without looking like noise. The optional grain is separate, stays still rather than crawling, only touches the midtones and is capped low on purpose.
The movement itself comes from smooth mathematical noise and sine waves, not random numbers, so nothing flickers from one frame to the next. That is also why the PNG export at any size matches what you saw in the preview.
Yes. It is free with no signup, and the code you export is yours to use in personal and commercial projects. Everything runs in your browser and nothing is sent to We.Inc.
A shader is a small program that runs on the graphics card for every pixel. Here a fragment shader works out the color of each pixel from your stops, the position on screen and the current time, so the gradient can move smoothly at any size without a video file or large image.
No. The React component and the HTML snippet use the browser's own WebGL API directly. The React file only imports React itself.
It costs some graphics work, so the exported code is careful with it: it limits pixel density to 1.5x, lowers its resolution if frames start running slow, and stops drawing completely when the section is scrolled out of view or the tab is hidden. It is still sensible to use one animated background per page and to test on an older phone.
If the visitor's system asks for reduced motion, the exported code draws a single still frame and never animates. This preview follows the same setting and starts paused; you can press Play to see the motion yourself.
The exported wrapper already has a static CSS background made from your colors, so if WebGL is off, blocked or loses its context, visitors see that still version instead of a blank box.
The shader blends colors in the OKLab color space instead of plain RGB. That keeps mixes between two saturated colors bright rather than passing through grey. A CSS linear-gradient blends in RGB by default, so the static fallback can look slightly flatter.
Related: Color palette generator, CSS gradient generator, Color contrast checker, Tailwind color palette generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.