Heatmap Simulator - Free Online Click Heatmap Generator

1. 1

   1. Set Canvas Dimensions

   Enter a width and height that match the page or mockup you're simulating - for example 1440×900 for a desktop layout or 375×812 for a mobile screen.

2. 2

   2. Add a Background Image (Optional)

   Upload a screenshot, wireframe, or design mockup so the heatmap overlays directly on real layout context. This makes it far easier to judge whether "hot" zones align with buttons, headlines, or navigation.

3. 3

   3. Choose or Customize a Gradient

   Pick one of six built-in gradient presets (Fire, Cool, Viridis, Plasma, Sunset, Ocean) or set your own three-stop color gradient using the color pickers for full brand-matched control.

4. 4

   4. Click to Simulate Interactions

   With Click Simulation enabled, click anywhere on the canvas to drop a heat point at that coordinate. Each click accumulates, building up warmer zones exactly like a real click heatmap would after many visitor sessions.

5. 5

   5. Batch-Generate Random Clicks

   Use "Simulate 50 Clicks" to instantly scatter randomized heat points across the canvas - useful for quickly previewing what a busy, high-traffic heatmap looks like at a glance.

6. 6

   6. Tune Radius and Intensity

   Radius controls how far each point's "glow" spreads - larger radius blends nearby points into broader warm zones. Intensity controls how strongly each individual click contributes to the overall heat value.

7. 7

   7. Export or Share

   Export the finished heatmap as a PNG image for a deck or report, export the raw point data as JSON for use in your own heatmap.js integration, or copy a share link that reproduces the exact heatmap state for a colleague.

Real-world heatmap analytics platforms typically generate three distinct types of heatmaps, each answering a different UX question:

A heatmap gradient defines the color ramp used to represent interaction density, from the coolest (lowest activity) to the hottest (highest activity) points. This tool ships with six presets:

• Fire - the classic blue → yellow → red ramp used by most commercial heatmap tools.
• Cool - white → cyan → blue, useful for a calmer, lower-contrast presentation.
• Viridis - a perceptually uniform purple → teal → yellow scale, popular in data visualization for being colorblind-friendly.
• Plasma - a high-contrast purple → pink → yellow scale with strong visual pop.
• Sunset - dark navy → coral → gold, good for dashboards on dark backgrounds.
• Ocean - deep navy → blue → mint, a cooler alternative to the standard fire gradient.

Radius controls the blur spread around each individual point. A small radius keeps hot zones tight and precise - useful for pinpointing exact button clicks. A large radius blends nearby points into broad, smooth zones - useful for showing general areas of attention across a whole page section. Intensity (or value) sets how much each individual point contributes to the underlying heat data before the gradient is applied - higher intensity points reach "hot" colors faster with fewer accumulated clicks.

It's worth being clear about what this tool does and doesn't do. This is a simulator, not a visitor-tracking analytics product. It does not embed a script on your live website, does not collect real click data from real visitors, and does not send any data to a server - every point you place, image you upload, and gradient you configure stays entirely inside your browser session.

• No tracking script or SDK to install on your production site
• No visitor data, cookies, or personal information collected
• All rendering happens client-side using heatmap.js in your browser
• Exported PNG/JSON files contain only the synthetic points you generated
• Ideal for mockups, presentations, and learning - not a replacement for real analytics

If you need real visitor click data, look at a production heatmap platform such as Hotjar, Microsoft Clarity, Crazy Egg, or Mouseflow - this simulator is the right tool for previewing and prototyping, not for measuring actual user behavior.