Mesh Gradient
GradientsDescription
Silky animated multi-color mesh field with domain-warped organic boundaries, luminous color cores, and film-grain finish — Stripe-homepage-grade.
What is the animated mesh gradient?
Mesh Gradient is a free animated mesh gradient that renders in real time with WebGL, so it stays sharp on any screen without shipping a heavy video file or GIF — and it pauses while off-screen to keep pages fast.
Use it as visual inspiration for a hero or section background on a landing page, portfolio, SaaS site or app. Every parameter — colors, speed and intensity — is adjustable in the remix playground. No account is needed to preview it.
Make it yours
Every knob below is tuned by the AI to match your design — or ask for changes in plain language, like “slower and more blue.”
colorsPaletteThe 2-5 hues of the mesh; each color owns a drifting region. Adjacent hues on the wheel blend silkiest; complementary pairs stay vivid thanks to gamma-space blending.
bgPaletteShadow tint that breathes into the luminance valleys — sets the mood of the dark areas (deep navy/plum reads premium).
bg-alpha0–10 lets the host section show through the valleys for a translucent color-wash; 1 is a fully opaque field.
speed0.05–2Drift tempo. 0.2-0.5 looks expensive and calm; above 1 becomes energetic/playful.
scale0.5–3Feature size of the flow detail; lower = broad sweeping forms, higher = finer cloud texture.
warp0–1.5Organic distortion of color boundaries; 0 yields clean smooth regions, high values give marbled fluid edges.
softness0.2–1Blend width between color regions; low = punchy saturated zones, high = dreamy diffuse transitions.
contrast0.5–2.5Tonal punch around mid-grey; raise slightly for vivid hero sections, lower for muted backdrops behind text.
grain0–0.2Animated film-grain overlay; a touch (0.04-0.08) kills banding and adds analog texture.
mouse0–1Cursor pigment-pull strength — a soft gaussian lens eases the color field toward the pointer, dragging color boundaries with it and gently brightening the local color cores, like a finger dragged through wet pigment; 0 disables the interaction entirely.
Frequently asked questions
Yes. You can preview the animated mesh gradient for free in the AIDesigner effects library — no watermark and no sign-up required to try it.
Use "Remix this effect" to tune the colors, speed, and parameters, then use the preview as a reference for your website background implementation.
It renders on the GPU through WebGL at a capped frame rate, so it is far lighter than a background video and automatically stops drawing when it scrolls out of view — keeping load and battery impact low.
Yes. Every knob in the "Make it yours" section is adjustable, and you can also just ask the AI in plain language — for example "slower and more blue" — and it retunes the animated mesh gradient to match.
More effects
View allFluted Glass
Rounded glass flutes acting as true cylindrical lenses over a fluid two-tone light field: every rib compresses and mirrors the scene across its whole width while the rims light-pipe and disperse it — every visible line is displaced light, nothing painted on.
Riso Dither
Animated flow field quantized through a Bayer matrix into a limited ink palette — crisp retro risograph halftone dithering with chunky pixels, wind-swept ribbons, and a drifting luminous core.
Noise Shimmer
Premium film-texture finish: slow thin-film iridescent ribbons with fine animated grain and a subtle vignette.
