Window Mockup Generator

The polish a window adds, and when it's warranted

A browser or macOS window frame turns a raw screenshot into something that looks designed. The traffic-light dots, the rounded corners, the subtle shadow, and a little breathing room of background — together they read as 'a considered product shot' rather than 'a screen grab someone pasted'. This is the standard treatment for documentation headers, landing-page hero images, blog post leads, changelog entries and the screenshots in a README, where a bare capture looks unfinished next to polished competitor pages.

Like every frame, it's additive only when presentation is the goal. For a support ticket, a bug report, or a step in a how-to, the chrome is wasted pixels and can even confuse — a fake browser bar around a screenshot of a desktop app sends a mixed signal. The rule mirrors the device-frame one: dress up screenshots you're showcasing; leave screenshots you're explaining plain, and point at the relevant part with the screenshot annotator instead.

The URL bar is a detail people get wrong

• Set a believable URL — a browser mockup with the bar left blank, or still showing localhost:3000, instantly betrays that it's staged. Type the real (or intended) production URL so the image reads as the live product.
• Mind the protocol and lock icon — showing http:// or a broken-padlock state in a marketing shot quietly signals 'insecure'. Present the https:// version you actually want associated with the brand.
• Browser versus OS window — use browser chrome (with a URL bar) for web apps, and a plain macOS-style title-bar window for desktop apps, native tools and code. Putting a URL bar around a desktop app is a small lie the eye catches.
• Don't leak in the bar — autofilled URLs, a visible bookmarks row with personal sites, or an open-tab title can carry private information. Use a clean, deliberate URL, not whatever your real browser had loaded.

Shadow, padding and background without the amateur tells

Three settings make or break the result. Padding: too little and the window kisses the edges, killing the shadow; too much and the actual content shrinks to nothing — aim for enough margin that the shadow has somewhere to fall. Shadow: a soft, low, slightly-offset shadow reads as natural light; a hard, uniform, all-around glow reads as a clip-art drop shadow and is the single most common amateur tell. Background: a flat colour, a gentle gradient, or a muted brand tint all work; a busy photo behind a window fights the content for attention.

What a window mockup is not: a way to fake functionality. It's a still frame, so a 'browser' in the image won't scroll or click — don't use it to imply an interactive demo you can't deliver. And it doesn't fix a low-resolution capture; a blurry screenshot in a crisp frame just looks like a blurry screenshot in a frame, so grab the source at high DPI. For code specifically, the code screenshot tool builds the window and the syntax highlighting together, which is cleaner than mocking up a screenshot of your editor; for mobile UI, reach for a device frame instead.