How to add a browser, Mac, or iPhone frame to a screenshot

A raw screenshot is a rectangle. A screenshot inside the right frame is a product. Frames do something deceptively simple: they tell the viewer’s brain “this is software running, not a static image,” which makes the same UI feel real, premium, and worth using.

But you can’t just slap a Mac window around everything. Use a browser frame on a desktop app and people get confused; use a phone frame on a web dashboard and the shot looks fake. Here’s how to pick the right one every time — and how to make it look natural when you do.

The three frames worth using

You only need three frames in your toolkit. Anything more is cosplay.

• macOS window — traffic-light buttons, soft top bar, rounded bottom corners. Best for desktop SaaS, dev tools, native apps.
• Browser frame — address bar (sometimes tabs), usually a Chrome-ish chrome. Best for web apps, marketing pages, any product accessed via URL.
• Mobile device frame — a stylized phone bezel with a rounded screen. Best for mobile apps, responsive views, anything you want to feel handheld.

A fourth option matters too: no frame. Sometimes the cleanest move is to skip the chrome entirely and let the UI breathe. We’ll cover when below.

1. The macOS window: when to use it

The Mac window is a status signal. It says “this is a real app, sitting on a real desktop, used by professionals.” Reach for it when:

• The product is a desktop or hybrid app (native or Electron).
• You want the screenshot to feel premium — Mac chrome is shorthand for “designer audience.”
• You’re showing dense UI (IDEs, dashboards, data tools). The chrome contains it visually.

Don’t use it for Windows-only apps (it’s technically a lie), or for mobile-first products. And don’t over-stretch the traffic lights or title bar — they read as cheap immediately.

2. The browser frame: when to use it

A browser frame is the most honest choice for any web app. It says “you can use this right now in a tab.” Reach for it when:

• The product is accessed via a URL.
• You want to show off the URL itself — a clean, branded path (e.g. yourapp.com/dashboard) is part of the pitch.
• You’re writing a marketing site for a SaaS, browser extension or web tool.

Two pitfalls: don’t use it for command-line tools (they don’t live in browsers), and don’t put a fake URL in the address bar. If the URL doesn’t match the actual product, viewers smell it instantly.

3. The mobile frame: when to use it

A phone bezel makes any UI feel tactile and personal. Reach for it when:

• The product is a mobile app or has a strong mobile experience.
• You’re posting to Instagram or Threads, where mobile-shaped content outperforms.
• You want to communicate “designed for the small screen” without saying it.

Skip it for desktop apps and dashboards, even if they happen to work on mobile — a phone frame on a clearly desktop UI looks like a mockup, not a product.

4. No frame: surprisingly powerful

The default editorial choice is sometimes the strongest one. Drop the frame entirely when:

• The UI you’re showing is so distinctive it doesn’t need explaining (think Figma, Notion, Linear — instantly recognizable).
• You’re focusing on a component, not a whole app — a single toast, dropdown or onboarding step.
• You’re going wide on a hero banner where the chrome would only steal space from the actual product.

Naked screenshots feel modern when paired with a generous padding, a soft shadow and a quiet background. The frame isn’t mandatory — design is.

How to make a frame look natural

A bad frame is worse than no frame. Three small rules save 90 % of the mistakes:

1. Match the corner radius. The corners of your screenshot should match the corners of the frame. Mismatched radii scream “photoshopped.”
2. Don’t stack frames. A browser inside a Mac window inside a phone? Each frame fights for the eye. Pick one device, one chrome.
3. Keep the chrome quiet. The frame is a container, not the subject. Soft grays, neutral title bars, plausible URLs. The UI inside is the star.

Combining frames with the rest of the screenshot

A frame doesn’t replace the basics — it sits on top of them. The full stack for a finished marketing shot is roughly:

1. Pick the right aspect ratio for the platform.
2. Apply the right frame (or skip it).
3. Add padding so the framed shot has room to breathe.
4. Drop a soft, slightly-down shadow under the frame.
5. One quiet background — solid, gradient, or brand color.
6. Export at 2× minimum.

That single stack covers landing pages, X posts, Product Hunt galleries and OG cards. The frame is the part that says “this is real software” — everything else is the polish that makes it shippable.

One last opinion

If you’re reaching for a frame because the underlying screenshot feels weak, change the screenshot — not the chrome. A great UI in no frame always beats a meh UI in a glossy Mac window. Frames flatter; they don’t rescue.