How Do You Make a Browser Mockup from a Screenshot?

Drop your screenshot into a browser window frame, type your own domain into the address bar, and export at up to 4×. On Device Shots this runs entirely in the browser with no sign-up, and the browser frames come in 9 vector window styles, light or dark, so the result stays sharp at any size. The steps below cover the full path from canvas size to export.

Step 1: Pick a canvas size that matches where the image will live

The mockup is only as useful as its dimensions. Device Shots lets you start from a template already sized for a platform, or set any custom canvas up to 6000 px.

If you're framing a browser window specifically, the Website Hero and Open Graph templates are the natural fits — both are wide enough to show a full toolbar and address bar without cropping the page content.

Step 2: Add a browser window frame

Choose a browser window instead of a device. Device Shots offers 9 vector window styles, each available in light or dark:

• Safari — compact bar with a centred address
• Safari (tabs) — toolbar with a tab row below
• Chrome — tab strip plus toolbar
• Chrome (Windows) — caption buttons, no traffic lights
• Edge — Windows chrome with rounded tabs
• Brave — Chrome layout with orange accents
• Arc — tinted, inset content

Pick based on the audience. A Mac-centric portfolio reads better with Safari or Arc; a cross-platform product page is safer with Chrome. Because the frames are vector, they stay crisp whether you export at 1× or 4×.

Step 3: Drop, paste, or upload your screenshot

With the frame in place, add your screenshot by dragging it in, pasting from the clipboard, or uploading. The image fills the window's content area, so crop or resize your source screenshot to roughly the frame's aspect ratio first — a 16:9 screenshot in a 16:10 window will letterbox or crop.

Step 4: Type your domain into the address bar

The address bars are editable. Replace the placeholder with your real domain so the mockup reads as a genuine page rather than a generic demo. This is the detail that separates a convincing browser mockup from an obvious template — a viewer's eye goes straight to the URL.

Step 5: Style the background, text, and shadows

Add a headline, adjust the background, and apply shadows to lift the window off the canvas. Keep the background simple if the screenshot itself is busy; a gradient or flat colour behind a dark browser frame usually reads cleanest.

Step 6: Export at up to 4× or copy to clipboard

Export the finished visual at up to 4× resolution, or copy it straight to your clipboard for pasting into a doc or chat. For a 1920 × 1080 hero, a 2× export gives you 3840 × 2160 — enough headroom for retina displays without bloating the file.

Common snags

• Blurry result — you exported at 1× from a small canvas. Raise the canvas size or the export multiplier.
• Address bar looks fake — you left the default text in. Type your actual domain.
• Screenshot is cropped oddly — the source aspect ratio doesn't match the window. Re-crop the screenshot before dropping it in.
• Wrong browser vibe — a Windows-style frame (Edge, Chrome with caption buttons) on a Mac-focused page, or vice versa. Match the frame to your audience.

When this approach fits

Use a browser mockup when the thing you're showing is a web page — a landing page, a dashboard, a docs site. For app screens, a phone or tablet frame communicates more; for desktop software, a laptop frame. The browser window is the right frame specifically when the URL and the page chrome are part of the story you're telling.