Heatmap

Gradients
Interactive — move your cursor

Description

A slowly evolving thermal-imaging field with pulsing white-hot blooms, inferno-style cold-to-hot palette mapping, and faint topographic isoline contours.

What is the thermal heatmap background?

Heatmap is a free thermal heatmap background 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.”

colorsPalette

Thermal palette stops in order from coldest to hottest (2-6 hex colors). The first color is the chilly background tone, the last is the white-hot core; adjacent stops blend smoothly, so pick a hue path that stays saturated (blue→purple→red→orange→cream) rather than jumping across the color wheel.

bgPalette

The void color beneath the coldest zones — the absolute-zero backdrop the heat field fades into. Keep it near-black and slightly tinted toward the first palette stop for a seamless cold falloff.

bg-alpha0–1

Backdrop opacity. 1 = opaque thermal scene; 0 = cold zones become fully transparent so glowing heat islands float over the host page section; mid values give a translucent haze.

speed0.05–2

Global evolution rate. Higher = churning, urgent, lava-lamp energy; lower = glacial, expensive-looking thermal drift. Stay at or below the default for premium hero backgrounds.

scale0.5–4

Zoom of the thermal field. Higher = many smaller heat cells and busier texture (good for small cards); lower = one or two vast continental heat masses (good for wide heroes).

hotspots0–8

Number of pulsing hot cores that bloom white-hot and fade on independent slow cycles. Higher = more focal flares competing for attention; 0 = pure ambient field with no blooms.

glow0–2.5

Intensity of the hotspot blooms. Higher = dramatic white-hot suns with wide halos that dominate the frame; lower = subtle warm embers; 0 silences the blooms entirely.

flow0–2

Directional drift strength. Higher = the whole field visibly streams diagonally like heat carried on a breeze; 0 = the field churns in place with no net movement.

contrast0.4–2.2

Separation between cold and hot regions. Higher = punchy, high-drama islands of heat against deep cold voids; lower = a gentle, even warmth across the whole frame.

contours0–24

Density of the faint topographic isoline rings traced around heat levels. Higher = tighter, more technical instrument-readout rings; lower = a few broad elevation lines; 0 = none for a perfectly smooth plasma look.

mouse0–1

Cursor heat strength. The pointer presses a soft thermal bloom into the field — a tight white-hot core with a wide halo that the palette, isoline contours, and emissive lift all wrap naturally, like a thumb on a thermal camera. It blooms while the cursor moves and cools back to the ambient field within a couple of seconds at rest. 0 disables the interaction entirely.

Frequently asked questions

Yes. You can preview the thermal heatmap background 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 thermal heatmap background to match.

More effects

View all