Turn a raw screenshot into a presentable mockup
A bare screenshot tends to look unfinished the moment it leaves your screen: hard edges, no context, white UI dissolving into a white page. Wrapping the same image in a browser or macOS window frame fixes that in seconds — the chrome tells people what they are looking at, and the padding, background and shadow give it enough presence to hold its own in documentation, release notes, portfolio pages, social cards and slide decks.
This browser mockup generator draws everything on a canvas right here on the page. The frames are vector paths, not stretched stock images, so they stay sharp at any export size.
How to put a screenshot in a browser frame
- Drop a screenshot on the tool above, paste it with ⌘V, or click to browse.
- Pick a frame: macOS window, Safari-style browser, Clean, or None.
- Type your own window title or address-bar URL — it is drawn straight onto the canvas.
- Choose a background, then tune the padding, corner radius and shadow sliders.
- Copy the PNG to your clipboard or download it, at 1× or 2×.
Browser frame, macOS window, or clean?
Browser frame
Use the Safari-style frame when the screenshot shows a website or a web app. The URL pill instantly communicates “this is live on the web”, which is why it works so well in launch posts and landing-page sections. Keep the URL text real — a believable address builds more trust than a placeholder ever will.
macOS window
Choose the macOS window mockup for native app UI: settings panes, dialogs, editors, terminals. The title bar with traffic-light buttons reads as “desktop app” at a glance, which matters in changelogs and docs where readers need to know which surface they are looking at. Match the theme to the content — a dark terminal shot belongs in the dark window frame.
Clean and none
Clean adds rounded corners and a soft shadow without any chrome — the right choice when the interface already has its own header, or for mobile screenshots where desktop chrome would lie. None skips the frame entirely and applies just the background, padding, shadow and corner radius, so you can round off a bare screenshot and set it on any background — no window frame in sight.
Tips for sharper mockups
- Export at 2× when the mockup will be shown large or on Retina displays. The frame chrome is redrawn at the higher scale rather than upscaled, so title bars and URL text stay crisp.
- Choose the transparent background when the image will sit on a slide or a colored page — the PNG keeps its alpha channel, so the framed window floats directly on your deck’s own background.
- Start from a clean capture. A window screenshot with slivers of desktop around it breaks the illusion; on a Mac, Snapix’s window capture (⌘⇧5) grabs exactly one window with a live highlight — see all five capture modes.
- Blur emails, tokens and names before framing. Our annotate screenshot tool redacts in the browser, so nothing sensitive ships inside your mockup.
- Size the padding to the destination: generous padding suits social cards and hero images, tighter padding suits documentation where space is scarce.
Fast, free, in your browser
Everything happens in a canvas element on this page: decoding, framing, drawing the text and exporting the PNG. There is no render queue and no watermark — a full-size Retina screenshot is framed as fast as your machine can draw it, right in your browser.
