# Heatmap Simulator - Free Online Click Heatmap Generator Simulate click heatmaps, upload a background mockup, and preview how warm and cool zones look with real gradient presets. Free, browser-based, and built for designers, UX teams, and anyone learning how heatmap analytics work before wiring up a real tracking script. ### Heatmap Controls Click Simulation Width _900_ Height _520_ Radius _40_ Gradient Presets fire cool viridis plasma sunset ocean Gradient 0.0 _#0ea5e9_ Gradient 0.5 _#f59e0b_ Gradient 1.0 _#ef4444_ Click Intensity _25_ Simulate 50 Clicks Clear Clear BG Import Heatmap JSON_{"kind":"heatmap","width":900,"height":520,"points":\[{"x":100,"y":120,"value":40}\]}_ Import JSON Export JSON Export PNG Share ### Heatmap Preview 6 Gradient Presets Fire, Cool, Viridis, Plasma, Sunset, Ocean 100% Client-Side No tracking scripts, no data sent anywhere Instant Rendering Heatmap updates live as you click Shareable & Exportable PNG, JSON, and share-link output ### What Is a Heatmap Simulator? A **heatmap simulator** is a tool that generates a color-coded overlay showing simulated interaction density on a page mockup, wireframe, or uploaded image - without needing live visitor traffic or a tracking script installed on a production site. It uses the same visual language as real UX analytics platforms: warm colors (red, orange, yellow) mark areas of high simulated activity, and cool colors (blue, green) mark areas of low activity. This tool creates an interactive **heatmap preview** directly in your browser, giving you a clear view of how a real click heatmap would render before you commit to a full analytics integration. Click anywhere on the canvas to drop a heat point, batch-generate random clicks to preview density at scale, upload a screenshot or mockup as the background, and fine-tune the radius, intensity, and color gradient until it matches the visual style you need. It is commonly used by **UX designers** mocking up how a redesigned landing page might perform, by **product teams** presenting hypothetical engagement zones in a pitch deck, by **developers** testing heatmap rendering configuration options before wiring up real event data, and by anyone who wants to understand how click heatmap visualizations work without paying for a full analytics subscription. ### How to Use the Heatmap Simulator - Step by Step 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 rendering integration, or copy a share link that reproduces the exact heatmap state for a colleague. ### Click Heatmaps vs. Scroll Heatmaps vs. Move Heatmaps Real-world heatmap analytics platforms typically generate three distinct types of heatmaps, each answering a different UX question: #### Click Heatmaps Show exactly where visitors click or tap, revealing which buttons, links, and CTAs get engagement - and exposing "rage clicks" on elements that look clickable but aren't. This is the interaction type this simulator models. #### Scroll Heatmaps Show what percentage of visitors scroll down to any given point on the page. Redder zones near the top mean high visibility; a sharp cutoff further down flags content that most visitors never see. #### Move (Mouse-Tracking) Heatmaps Track cursor movement as a proxy for visual attention. On desktop, mouse movement correlates loosely with eye movement, giving a rough approximation of where attention is drawn on the page. ### Understanding Gradient Presets and Heat Radius 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. ### Real-World Use Cases for Heatmap Analytics #### Conversion Rate Optimization Product and growth teams use click heatmaps to see whether visitors actually click the primary call-to-action button, or get distracted by secondary links, and adjust page layout accordingly. #### Landing Page & A/B Test Reviews Comparing heatmaps between a control page and a variant reveals whether a redesign genuinely shifted attention toward the intended elements, not just whether conversion numbers moved. #### Rage-Click & Dead-Click Detection A tight cluster of repeated clicks on a non-interactive element usually signals a broken button, unclear affordance, or JavaScript error frustrating real visitors. #### Design & Stakeholder Presentations Designers use simulated heatmaps over mockups to communicate expected user attention patterns to stakeholders before a page ever goes live. #### Above-the-Fold Content Placement Scroll and click density near the top of the page help teams decide what content, offers, or navigation deserve the most prominent placement. #### Learning heatmap rendering Configuration Developers integrating heatmap rendering into their own product can use this tool to experiment with radius, gradient, and maxOpacity settings visually before writing configuration code. ### Simulated Data vs. Real Visitor Tracking 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 rendering 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. ### Features #### 6 Gradient Presets Fire, Cool, Viridis, Plasma, Sunset, Ocean - switch instantly with one click. #### Custom Gradients Full control over a 3-point color gradient using native color pickers. #### Background Support Upload a screenshot or mockup for context-aware heatmap previews. #### Batch Simulation Generate 50+ random clicks instantly to preview density at scale. #### Export & Share Download as PNG or JSON, or copy a share link that reproduces the exact state. #### Adjustable Radius & Intensity Fine-tune how tight or spread-out each simulated click's heat contribution is. ### Frequently Asked Questions #### Is this a real analytics tool that tracks my website visitors? No. This is a simulator for generating synthetic heatmaps from points you place manually or generate randomly. It does not track real visitors or install any script on your site. #### Can I use my own screenshot as the heatmap background? Yes. Upload any image file and it will be set as the canvas background, letting you preview how a heatmap would look overlaid on your actual page design. #### How does this simulator work? The simulator draws a heatmap preview locally in your browser. Adjust the controls, inspect the result, and export the visual when it matches your intended data. #### Can I export the heatmap I built? Yes. Export a PNG image for presentations and reports, export the raw point data as JSON for programmatic use, or copy a share link that encodes the full heatmap state for someone else to load. #### Is any of my data uploaded to a server? No. All rendering, storage, and export happens locally in your browser. Background images are loaded as local object URLs and never leave your device. ## Related Tools Discover more free tools that might help with your next task. [Tree Builder Build and visualize tree data structures Use Tool](https://www.toolcomb.com/tree-builder) [Chart Maker Turn CSV data into bar, line, or pie chart PNGs Use Tool](https://www.toolcomb.com/chart-maker) ### Related guides Read the how-to, then come back to this tool when you are ready to run it locally. - [When to Use a Heatmap in UX and How to Simulate One Heatmaps for layouts and click hypotheses - simulate patterns without analytics export.](https://www.toolcomb.com/blog/when-to-use-a-heatmap-in-ux) [View All Tools](https://www.toolcomb.com/tools)