Landing page hero
A screenshot inside a browser frame reads as "this is a web app" at a glance. Use a transparent background (PNG or WebP) to drop it onto any section colour.
Put a screenshot in a browser window
Wrap your product screenshot in a Chrome, macOS or Windows browser frame with your own URL and tab title, then export it for a landing page, a launch post or your docs. Unreleased screens are never uploaded.
- Your URL and tab title
- Never uploaded
- No watermark
Browser mockup
Loading sample
Sample screenshot· drop, or paste with CtrlV
Output 0 × 0 px· stays on this device
Paste CtrlVDownload CtrlS
Stays on your device. Your file is processed right here in this browser tab. Nothing is uploaded, stored or sent anywhere.
Updated October 2026
Quick answer
To make a browser mockup, drop your screenshot into the tool above, pick a browser frame and type the URL you want in its address bar. Add a background and padding if the mockup sits on a busy page, choose a size such as 16:9 for a social post, and download a PNG. Set the background to None for a transparent mockup you can place on any colour.
Hide private data before the mockup
Real product, no real customers in the shot
The best product screenshots come from the real app, which is full of real names, emails and revenue. The Blurr.ing Chrome extension blurs any of it in the live page, then its capture shortcut takes the shot with the blurs already in the pixels and offers a browser window frame, a background, padding and corners on the result.
- Blurring in the page is free and unlimited.
- The free plan includes 5 screenshots; Premium removes the limit.
- The image is built in your browser and never uploaded.
Add to Chrome
Free to install, for Chrome on a computer.
How it works
How to make a browser mockup
Four steps, about a minute, no design app.
- 1
Add your screenshot
Drop a screenshot of your product on the preview, paste it with Ctrl+V (Cmd+V on a Mac), or press Choose image. A sample page is shown until you do.
- 2
Pick the browser frame
Choose Chrome on macOS or Windows, a macOS or Windows browser bar, a plain macOS or Windows window, or no frame. Set the theme to light, dark, or auto to match the top of your screenshot.
- 3
Write the URL and tab title
Type the address you want in the address bar, such as yourproduct.com/pricing, and a tab title for the Chrome frame. Nothing has to be a real, live URL.
- 4
Set the canvas and export
Add a background, padding, corners and a shadow, pick a size such as 16:9 or 1:1, then download a PNG, JPEG or WebP at full resolution or copy it to the clipboard.
Where it helps
Product visuals that say "web app" at a glance
A bare screenshot is a rectangle of UI. The same screenshot in a browser frame shows where it lives and what kind of product it is.
Launch posts and galleries
Product Hunt galleries, launch tweets and changelog posts all show a product better in context than as a bare crop. Pick 16:9 or 1.91:1 so the frame is not cropped in the preview.
Docs and help articles
A browser frame with the real path in the address bar tells a reader exactly which page a step happens on, which a cropped panel cannot.
Social and slides
Sizes for X, LinkedIn, Instagram posts and portraits, stories and Dribbble grow the canvas to the ratio without cropping your screenshot.
The frames
Six browser and window frames
Each one is drawn as flat shapes at the resolution of your screenshot, light or dark, so it stays sharp on a Retina capture.
- Chrome on macOS
- A tab strip with the three window lights and one tab (favicon, title, close) over a toolbar with back, forward, reload and the address bar. The most recognisable "web app" frame.
- Chrome on Windows
- The same tab strip and toolbar with minimise, maximise and close at the right end of the strip, the way most of your users see Chrome.
- macOS browser
- The three window lights with a centred address field, close to a Safari-style title bar.
- Windows browser
- An address field on the left and the minimise, maximise and close glyphs on the right.
- macOS window
- Window lights and an optional title, no address bar: for desktop apps or when the URL should not show.
- Windows window
- A plain title bar with minimise, maximise and close on the right: for Windows apps, without a URL.
FAQ
Browser mockup questions
Is this browser mockup generator free?
Yes. It is free with no account, no watermark and no limit on how many mockups you make. It runs entirely in your browser.
Is my screenshot uploaded anywhere?
No. The image is read from your device and drawn on a canvas in this page. It is never sent to a server and never stored, so unreleased product screens stay private.
Can I change the URL and the tab title?
Yes. Type any address into the Address field and any text into Tab title (Chrome frame). They are drawn into the frame, so you can show a staging page under your production domain or a short, tidy path.
Can I make a mockup with a transparent background?
Yes. Set Background to None and export PNG or WebP: the area around the window and its rounded corners stay transparent. JPEG has no transparency, so that area turns white.
Does it work with dark mode screenshots?
Yes. The frame theme set to Auto reads the top of your screenshot and picks a light or dark frame to match. You can also force Light or Dark.
What is the difference from the screenshot background tool?
Same engine, different starting point. The screenshot background tool starts with a gradient and no frame, for a polished screenshot. This page starts with a browser frame and puts the URL, tab title and frame style first, for product visuals.
How do I keep customer data out of a product mockup?
Blur it in the live page before you take the screenshot. The Blurr.ing Chrome extension blurs any name, email or number on a web page, then its capture shortcut takes the shot with the blurs already in the pixels and offers a browser window frame too. Its free plan includes 5 screenshots.