# Responsive Breakpoint Visual Diff Render a URL at multiple viewport widths and inspect screenshots, pixel-difference heatmaps, and layout metrics in the page. > Canonical page: https://elysiatools.com/en/tools/responsive-breakpoint-diff - **Category:** Development - **Keywords:** responsive design, breakpoint, visual diff, viewport, screenshot, frontend review ## Overview Uses headless Chromium to render the same page at up to six viewports, captures a fixed viewport screenshot, then scales adjacent renders into a common comparison canvas and marks changed pixels in a heatmap. The report shows the screenshots, heatmaps, DOM viewport metrics, and a ZIP download. It measures rendered pixel change; it does not claim semantic element matching or PR baseline comparison. ## Inputs - **Website URL** (text): https://example.com - **Viewport Widths (px)** (text) - **Viewport Height (px)** (number) - **Wait After Load (ms)** (number) - **Comparison Mode** (select) ## When to use - When reviewing frontend layout changes across mobile, tablet, and desktop viewports to catch unexpected wrapping or alignment issues. - When auditing a website's responsive breakpoints to visualize how elements shift and scale between adjacent screen widths. - When generating visual regression reports and downloading screenshots alongside pixel-difference heatmaps for design QA. ## How it works - Enter the website URL and specify up to six target viewport widths in pixels along with a custom viewport height. - The tool launches a headless Chromium browser, loads the page, waits for the specified delay, and captures screenshots at each breakpoint. - It scales adjacent renders into a common canvas, highlights pixel-level differences in a heatmap, and extracts DOM viewport metrics. - The final report displays the screenshots, heatmaps, and metrics, and provides a ZIP file download containing all assets. ## Use cases - Verifying CSS media query transitions by comparing layout changes between mobile (375px) and tablet (768px) viewports. - Generating visual diff heatmaps to document layout shifts during a frontend framework migration or CSS refactoring. - Auditing landing page layouts across standard desktop, tablet, and mobile widths to ensure text and images scale correctly. ## Frequently asked questions ### How many viewports can I test at once? You can test up to six different viewport widths simultaneously. ### Does this tool perform semantic HTML element matching? No, it measures rendered pixel changes and generates visual heatmaps rather than comparing DOM elements semantically. ### Can I adjust the wait time before screenshots are taken? Yes, you can configure the wait time up to 10,000 milliseconds to allow dynamic content or animations to load. ### What comparison modes are supported? You can compare adjacent breakpoints or compare all configured viewports against the widest viewport. ### What is included in the downloadable ZIP file? The ZIP file contains the captured screenshots for each viewport, the generated pixel-difference heatmaps, and the layout metrics report. ## Related tools - [Tailwind Color Palette Sync](https://elysiatools.com/en/tools/tailwind-color-palette-sync): Generate theme.extend.colors for tailwind.config.ts from HEX colors, with WCAG contrast levels and optional dark mode. - [Code Complexity Analyzer](https://elysiatools.com/en/tools/code-complexity-analyzer): Measure cyclomatic and cognitive complexity across multiple programming languages - [HTTP Request Tester](https://elysiatools.com/en/tools/http-request-tester): A lightweight in-browser HTTP client (mini Postman): send GET/POST/PUT/DELETE requests with custom headers and body, inspect status, headers, timing, and formatted response — all from your browser - [Cron Expression Explainer](https://elysiatools.com/en/tools/cron-expression-explainer): Parse a 5-part / 6-part / Quartz cron expression into a plain-language schedule description, show the field-by-field breakdown, and list the next N execution times in any IANA timezone — with an AI-generated natural-language explanation in your language - [Domain Extractor](https://elysiatools.com/en/tools/domain-extractor): Extract domain names from URLs. Supports various extraction options including subdomains and path analysis. - [package.json Dependency Auditor](https://elysiatools.com/en/tools/package-json-dependency-auditor): Audit a package.json for dependency hygiene, version-range quality, and optionally inspect a transitive dependency tree from package-lock.json or yarn.lock. Flags duplicates, wildcard or pre-release specs, unsorted keys, missing metadata, and misclassified runtime/dev dependencies. - [pytest conftest Fixture Dependency Graph & mock.patch Leak Detector](https://elysiatools.com/en/tools/pytest-conftest-fixture-dependency-graph-and-mock-patch-leak-detector): Statically analyze a pytest conftest.py chain: render the fixture dependency graph across all five scopes (function/class/module/package/session), detect deeper-conftest overrides, ScopeMismatch edges, and cross-test state pollution — mock.patch().start() without .stop(), monkeypatch leaking from broad-scope fixtures, and with mock.patch held open across yield. - [URL Query Analyzer](https://elysiatools.com/en/tools/url-query-analyzer): Batch parse URL query parameters with output of key frequency, value samples, and encoding anomaly detection ## Samples - [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion - [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion - [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion - [Web Image Processing Rust Samples](https://elysiatools.com/en/samples/web-image-processing-rust): Web Rust image processing examples including image read/save, scaling, and format conversion ## Related content - [File and Data Diff Comparison Tools](https://elysiatools.com/en/hubs/file-data-diff-comparison-tools): Compare two candidate artifacts, choose the right diff path for the format, review structural or semantic changes, and finish with integrity checks when approval needs byte-level certainty.