Quick answer: capture the page at a deliberate viewport (for example 1440 px wide) with a device pixel ratio of 2, close banners and extensions, use demo data, and crop to the section that proves your point. Place it in a light or dark Safari or Chrome frame on a quiet background, keep the screenshot the largest and highest-contrast element, and export at the destination size. Use a monitor or laptop frame when physical context matters and no frame when every pixel of UI does.
Browser framing and screenshot capture are different jobs
A browser frame signals “this is a website” before the viewer reads a single label. It is the web equivalent of a phone frame around an app screen. The frame is presentation, though; the screenshot inside it carries the message, so the quality of the capture matters more than the frame.
Screenshot tool, DevTools or API
Opens a page and creates the source image. Handles viewport, pixel ratio, full-page scrolling and automation.
Browser mockup generator
Places the image in browser chrome and adds canvas size, crop, background, spacing, shadow, copy and export.
It presents, it doesn't build
A mockup shows an existing page or design. Create the interface in your design tool or codebase first.
Flat image, no interaction
The toolbar in a mockup is part of a picture. For clickable flows, use a prototyping tool; use the mockup to communicate one moment.
MockupX handles the compose step. You can paste, drop or upload a screenshot, or use its Capture button to grab a window or screen through the browser's own screen-sharing picker, then crop it before it goes into the frame.
Frame options: how much browser to show
MockupX has official-style toolbars for Apple Safari and Google Chrome, each in light and dark appearance, plus device and frameless options for when a browser bar is the wrong cue.
The standard website cue. Best for landing pages, SaaS dashboards, launch posts and decks.
Choose for contrast with the page. Dark chrome outlines a white page cleanly; light chrome suits a dark-mode app. The frame doesn't change the theme of the captured site.
Studio Display, Studio Display XDR, iMac, MacBook Air and MacBook Pro frames when you want a physical, product-photo feel.
Rounded corners and a soft shadow, no chrome. Best for documentation, UI close-ups and small placements.
Rule of thumb: the smaller the final image, the less chrome it can afford. A 1920 × 1080 hero can carry a full toolbar; a 1080 × 1080 feed post usually reads better with a tight crop and either a slim toolbar or none.
Capture a clean website screenshot
Most weak browser mockups fail before framing: a cluttered or low-resolution capture. Prepare the page first.
- Close overlays. Cookie banners, chat widgets, newsletter pop-ups, browser extension icons and dev tools.
- Use demo data. A sample workspace with fictional customers, plausible numbers and every state you want to show. Blurring one cell leaves names in other panels and in the browser tab title.
- Wait for everything to load. Web fonts, images, charts and lazy-loaded sections. A capture taken during a skeleton state makes a working product look broken.
- Show representative rows. Six readable table rows with status badges beat fifty tiny ones. Keep column headers and units visible.
- Keep chart context. Title, time range, units and legend. Cropping an axis can change what the chart appears to say.
- Open only the relevant menu. If a dropdown is the feature, capture it open, and capture the result in a second image.
- Decide on the sidebar. Keep it for tutorials, where readers need to know where a setting lives; crop it for marketing, where the result matters more than the navigation.
- Use empty states on purpose. They suit onboarding stories (“create your first project”). For feature images, a populated state communicates more.
Capture tools that work well
- Chrome DevTools device mode: set exact viewport dimensions and a device pixel ratio, then use More options > Capture screenshot for the viewport or Capture full size screenshot for the whole page.
- macOS: Shift-Command-4, then Space, captures a single window; hold Option while clicking to leave out the window shadow, which you will want to replace with the mockup's own shadow.
- Windows: Windows logo key + Shift + S opens Snipping Tool with rectangle, window, full-screen and freeform modes.
- MockupX Capture: captures a window or screen you pick in the browser's permission dialog and opens the crop editor straight away. If your browser doesn't offer screen capture, take the screenshot with your OS and upload it.
Viewport size and device pixel ratio
Two numbers decide whether a website screenshot will be sharp: the viewport width (in CSS pixels) and the device pixel ratio (DPR). Chrome describes DPR as the ratio between physical pixels on the screen and logical CSS pixels. The image you get is roughly viewport × DPR.
| Viewport (CSS px) | DPR | Screenshot width (px) | Good for |
|---|---|---|---|
| 1280 | 1 | 1280 | Small docs images; soft in a full-width 1920 hero. |
| 1280 | 2 | 2560 | Sharp heroes and decks with a compact layout. |
| 1440 | 2 | 2880 | A safe default for marketing images. |
| 1920 | 1 | 1920 | Wide dashboards; text becomes small once framed. |
| 390 | 3 | 1170 | A mobile view to pair with the desktop capture. |
A wider viewport is not automatically better. The wider the page, the smaller each label becomes once the whole screenshot is shrunk into a frame. Choose the viewport for the feature, not for your monitor: a settings panel reads better from a 1280-wide capture than from an ultrawide one. Raise the DPR, not the width, when you need more pixels.
Quick sharpness check: the screenshot's pixel width should be at least the width it occupies in the export. If a 1920 × 1080 canvas shows the browser window about 1600 px wide, a 1280-px capture is being enlarged and will look soft; a 2560-px capture is being reduced and will stay crisp. An export multiplier can't add detail that the source never had.
Crop: decide what the image must prove
Write the takeaway in one sentence before cropping. “You can see every invoice's status at a glance” tells you to keep the invoice table and status column and drop the rest.
The default
One screen's worth of page around the action that supports the headline: hero plus first content block, or the dashboard panel that matters.
Only for page reviews
Useful in a client review of a whole landing page. In marketing, a long page squeezed into one frame becomes an unreadable strip.
For dense dashboards
Crop to the chart, table or inspector that proves the claim. Keep its label so viewers know what they're looking at.
For long flows
Split a long dashboard or multi-step flow into two or three images instead of shrinking everything into one.
Keep calls to action and key controls away from the frame's edges, and never crop away the information that changes the meaning of a result, such as a filter or a date range.
How to create a browser mockup in MockupX
- Choose the output frame.HD, Presentation, Square, Portrait, X post, LinkedIn, YouTube thumbnail or a custom width and height (320–6000 px).
- Choose Browser as the mockup type.Pick Safari or Chrome, light or dark. The default is light Safari.
- Add the screenshot.Drop, paste, upload or capture it; use Edit on the media slot to crop before placing.
- Pick a layout.Single float, left, right, bottom or tilt for one window; duo, staggered, overlap, trio, fan, stack or cascade for comparisons and flows.
- Balance scale and padding.Padding runs from 3% to 24% of the canvas. Use less on small placements so the interface stays large.
- Add contrast and depth.Choose a background that separates the window, then a restrained shadow. Corner radius up to 38 px.
- Add a headline only if needed.Up to 100 characters, plus an optional description up to 180.
- Export and inspect at real size.PNG for crisp UI, JPEG for smaller photographic compositions, WebP and 2× on paid plans.
Paste or upload a website screenshot, choose a Safari or Chrome frame, and refine the composition in the browser.
Desktop and laptop mockups for web apps and dashboards
A monitor or laptop frame communicates a working environment; a browser window communicates software. Pick the one that matches the story.
Studio Display, XDR, iMac
For desktop software, analytics products and workspace stories. Keep the desktop wallpaper quieter than the interface, and don't imply support for an operating system the product lacks.
MacBook Air and MacBook Pro
A familiar “product on a laptop” hero for SaaS. The MacBook mockup page covers sizes and finishes.
- Preserve density selectively. Desktop screenshots carry navigation, tables, inspectors and charts at once. Keep what identifies the workflow; crop the rest rather than shrinking everything.
- Compose wide. Desktop products fit 16:9 heroes and slides. For social crops, make a separate, tighter composition instead of shrinking the wide one.
- Pair desktop and mobile honestly. If you show a phone next to the browser, use a real mobile capture of the same feature; a desktop screenshot in a phone frame doesn't demonstrate a mobile interface. The multi-device mockup generator covers these layouts.
Browser mockups for UI reviews, case studies and portfolios
Designers use browser frames to present finished or review-ready screens. The goal changes from selling to explaining a decision.
- Match the frame to the question. Spacing or component review: frameless. Stakeholder review of a page in context: browser frame.
- Keep annotations outside the product. Labels and arrows should look clearly different from real controls, so nobody mistakes them for interface.
- Control variables in comparisons. For before and after, use the same content, viewport, crop, scale and background in both images. Changing the data and the layout at once makes the comparison meaningless.
- Show only the states that answer the question. Three readable states beat twelve thumbnails.
- Hand off with context. Deliver the export, the original capture, the target placement and display width, and one line on what the image is meant to show. A flattened mockup is not editable HTML or a responsive component.
Browser mockup sizes by destination
These are MockupX output presets and the compositions that tend to work on each. Social networks change their own recommended sizes, so check the social media image sizes reference before a campaign.
| Destination | MockupX preset | What works |
|---|---|---|
| Landing-page hero | HD 1920 × 1080 | One browser window, slight tilt or none, headline beside or above. Crop to the feature the headline names. |
| Pitch or sales deck | HD 1920 × 1080 or Presentation 1920 × 1280 | Large window, almost no copy. Duo layout for before and after. |
| X post | X post 1600 × 900 | Wide window with a short headline; check that labels survive the timeline preview. |
| LinkedIn image | LinkedIn 1200 × 627 | Very short headline; crop tighter than you would for a hero. |
| YouTube thumbnail | YouTube 1280 × 720 | Big crop of one panel plus three to five words; the full page won't read. |
| Instagram feed | Square 1080 × 1080 or Portrait 1080 × 1350 | Crop to one panel; a full desktop page becomes illegible on a phone. |
| Docs or help center | Custom width matched to the content column | Frameless or minimal chrome; the reader needs the UI, not the browser. |
Related workflows: X post mockup, Facebook ad mockup, LinkedIn carousel mockup, YouTube thumbnail mockup, email newsletter mockup and SaaS launch graphics. For Instagram crops, see the Instagram post mockup guide.
Worked example: a SaaS feature launch
A team ships saved filters in its analytics dashboard and needs a blog hero, an X post and a docs image.
- Capture.Chrome DevTools device mode at 1440 × 900 with DPR 2, demo workspace, filter menu open: a 2880 × 1800 PNG. A second capture shows the filtered result.
- Blog hero (1920 × 1080).Duo layout: filter menu window in front, result behind. Dark Safari chrome on the Paper background so the white app stands out. Headline: “Save any view as a filter.”
- X post (1600 × 900).Single window cropped to the filter panel and the first table rows; slight tilt; same background. The full dashboard was too small to read in the timeline.
- Docs image.Frameless, cropped to the filter menu with the sidebar kept so readers see where the feature lives.
- Check.Each export opened at its real display size; the hero's second window was moved so it no longer covered the filter name.
Browser mockup mistakes and how to check for them
| Mistake | How to spot it | Fix |
|---|---|---|
| Soft, blurry interface | Compare the source width with the width it fills in the export. | Recapture at DPR 2 or a narrower viewport. |
| Whole page shrunk to a strip | Labels unreadable at 100% of the export. | Crop to a section or split into several images. |
| Cookie banner or extension icons | Scan the edges and corners of the capture. | Dismiss overlays, use a clean browser profile, recapture. |
| Real customer data | Read names, emails, amounts and the tab title. | Use a demo workspace. |
| Chrome dominates the image | Your eye goes to the toolbar first. | Use the opposite light/dark appearance, crop tighter or go frameless. |
| Double shadows | A dark halo around the window. | Capture without the OS window shadow (Option-click on macOS) and use one shadow in the mockup. |
| Clipped corner after tilt | Check all four corners of the downloaded file. | Reduce zoom or add padding; anything outside the canvas is not exported. |
| Misleading chart or comparison | Missing units, cropped axes, different data in before and after. | Keep context and hold every variable constant except the change. |
Browser mockup generator FAQ
What does a browser mockup generator do?
It places a screenshot of a website or web app inside browser-style window chrome (toolbar, address bar, window controls) and composes it on a background, so the image reads as a website at a glance. It works on a screenshot you already have; it does not load the page itself.
Is a browser mockup generator the same as a website screenshot tool?
No. A screenshot tool or API opens a URL and captures pixels. A browser mockup generator presents a capture you already made: crop, frame, background, spacing, shadow and export. Many people use both: capture in the browser or DevTools, then frame it in a mockup tool.
Which browser frames does MockupX have?
Apple Safari and Google Chrome toolbars, each in light and dark. For desktop context there are Studio Display, Studio Display XDR and iMac frames, plus MacBook Air and MacBook Pro laptops, and a frameless mode for screenshots that don't need chrome.
What resolution should a website screenshot be for a mockup?
At least as wide, in pixels, as the area it will fill in the final export, and ideally twice that for high-density screens. Capturing a 1440-pixel-wide viewport at a device pixel ratio of 2 gives a 2880-pixel-wide image, which stays sharp in a 1920 × 1080 composition.
Should I use a full-page screenshot in a browser frame?
Rarely. A long page squeezed into one frame becomes unreadable. Use the viewport capture for the section that makes your point, or split a long page into several images.
Should the mockup show Safari or Chrome?
Pick the one your audience uses or the one that matches the rest of your brand material, then stay consistent. Choose light or dark chrome for contrast with the screenshot: dark chrome frames a light page well, and vice versa.
Can I make a desktop or laptop mockup of a web app?
Yes. Use a monitor or MacBook frame when the physical setting matters (a launch hero, a product photo feel), and a browser frame when the web context is the more useful cue. Dashboards with small text usually read best in a browser frame or frameless.
Does a browser mockup create a website or prototype?
No. It produces a flat image of an existing screen. Build the interface in your design tool or code, then use the mockup to present it.