Laptop and Browser Mockups Done Right

A laptop mockup is how you make a website or web app look real on a page. It wraps your screen in a laptop or browser frame, so a flat capture reads as a living product. Done right, it sells the work. Done carelessly, with the wrong ratio or fake browser chrome, it quietly undercuts it.

This guide is for designers, founders, and marketers who present web work. I will cover browser chrome choices, the aspect ratios that matter, how to capture a website cleanly, and a finishing checklist. By the end you will frame any web screen so it looks like a real browser on a real laptop.

What you will learn

• When to use a laptop frame versus a plain browser frame.
• How to choose realistic browser chrome.
• The aspect ratios that keep web captures from stretching.
• How to capture a full website cleanly, including long pages.
• A checklist to finish every laptop mockup.

Laptop frame or browser frame?

You have two main options for web work. A full laptop frame shows the whole device, lid and all. A browser frame shows just the browser window, with no hardware around it. Each fits a different job.

A laptop frame gives scale and a physical, real-product feel. It is great for heroes and brand imagery, where you want the work to feel tangible. The trade-off is that the lid and body take space, so the screen itself is smaller.

A browser frame puts all the focus on the website. It is ideal for docs, feature shots, and tight layouts where the interface should lead. For the wider context on devices, see our complete guide to device mockups.

Choosing realistic browser chrome

Browser chrome is the bar at the top of the window: the traffic-light dots or buttons, the address bar, and sometimes tabs. Getting it right is what makes a browser mockup believable.

Keep it clean and neutral

Use a simple, neutral chrome rather than a heavily branded one. A clean address bar and a few window controls read as any modern browser. Overly specific chrome can date the image or distract from the site.

Show a believable URL

Put a real, sensible URL in the address bar, like your actual domain. An empty bar or a placeholder URL breaks the illusion. The URL is a small detail that quietly signals a real, live site.

Match light or dark to the site

If your site is dark, a dark browser chrome blends better. If it is light, use light chrome. A mismatched bar pulls the eye away from the content. For more on realism, read our realistic mockup tips.

Aspect ratios that keep captures crisp

Web screens are wide, and laptops are wider still. If your capture ratio does not match the frame, the image stretches or crops. Capturing at a common ratio keeps everything sharp.

The safe default for a laptop mockup is a 16:10 capture around 1440 pixels wide. It fills the frame without stretching and stays crisp at 2x export. Always capture at the highest resolution you can, then scale down.

Capturing a website cleanly

The screenshot is decided before you ever open a frame. A clean web capture is the biggest factor in a clean laptop mockup.

Hide clutter first

Close cookie banners, dismiss chat widgets, and hide any dev toolbars. These overlays read as noise in a polished mockup. A clean page tells a clear story.

Decide above-the-fold or full-page

For a hero shot, capture just the top of the page, the part visible without scrolling. For a long product page, you may want a full-page capture that shows the whole layout scrolling inside the frame.

Capture a live URL directly

Instead of taking a manual screenshot, you can capture a live website straight into a frame. This grabs the page at the right width and avoids browser chrome you do not want. See our website capture documentation for how it works, and the broader website mockups guide.

How to make a laptop mockup in Zepixo

Here is the quick workflow. It takes a web capture to a finished laptop or browser frame in minutes. Follow along in the Zepixo Mockups workspace.

First, capture your site at a 16:10 width, or use website capture to grab a live URL. Then pick a laptop frame for scale or a browser frame for focus, and choose flat 2D for docs or 3D for a hero. Let the capture fit the display area and confirm nothing important crops at the edges.

Next, set a body color and a background, or export with no background for a transparent PNG. For 3D, tune the light until the screen stays readable. Then export at 2x or 3x. The export documentation covers every option, and our 2D vs 3D mockups guide helps you pick the view.

Ready to try it? Open Zepixo Mockups and frame your website in a clean laptop or browser in minutes.

Export settings for web mockups

Crisp output starts at capture and ends at export. A wide laptop frame especially benefits from a high export scale, since the screen detail has a lot of pixels to fill.

The laptop mockup checklist

Run through this list before you ship any laptop or browser mockup. It catches the small things that separate a polished frame from a rushed one.

• Captured at a matching ratio, around 16:10 for laptops, so nothing stretches.
• Cookie banners, chat widgets, and dev toolbars hidden.
• Browser chrome is clean, neutral, and matches the site's light or dark theme.
• A real, sensible URL sits in the address bar.
• No important content cropped at the screen edges.
• Background supports the screen rather than fighting it.
• Light direction is consistent, with a soft grounding shadow in 3D.
• Exported at 2x or 3x in PNG, with transparency if you need it.

Handling long, scrolling pages

Web pages are often far taller than a laptop screen. You have two honest ways to show a long page, and each fits a different goal.

The first is a clean above-the-fold shot. Capture only the top of the page, the part visible without scrolling, and frame it in a laptop or browser. This reads as a real browser window and keeps the hero message front and center.

The second is a scrolling capture, where the full page sits inside the frame and the eye travels down it. This shows the whole layout in one image, which suits a portfolio or a detailed product page. Our website capture documentation handles both, and our screenshot to mockup guide covers the wider flow.

Pairing a laptop with other devices

A laptop mockup rarely works alone in a hero. Pairing it with a phone tells a stronger, more complete story, since most products live on both. The combination signals a real, cross-device experience.

The classic layout is a laptop in the back with a phone in front, both showing the same product. Keep the body color, background, and light direction matched across both, so they read as one scene. A watch can join for a third device when the product supports it.

Keep one device as the clear focus, usually the laptop for web work. Let the phone support rather than compete. For more on multi-device scenes, see our complete guide to device mockups and the isometric mockups guide.

Frequently asked questions

Should I use a laptop frame or a browser frame?

Use a laptop frame when you want scale and a real-product feel, such as heroes and brand imagery. Use a browser frame when the website should lead, such as docs and feature shots. Both work from the same capture.

What aspect ratio should a laptop mockup use?

Capture at 16:10 around 1440 pixels wide for most laptops, or 16:9 at 1920 pixels for a desktop monitor look. Matching the frame's ratio keeps the screen crisp and unstretched.

How do I capture a full website for a mockup?

Hide clutter like cookie banners and chat widgets, then capture the page. For a hero, grab the top of the page. For a full layout, use a full-page capture or website capture to grab a live URL directly.

What browser chrome looks most realistic?

Clean, neutral chrome with simple window controls and a real URL in the address bar. Match light or dark chrome to the site's theme so the bar blends in rather than distracting.

What resolution should a laptop mockup be?

Capture at the highest resolution you can, then export at 2x for web and retina or 3x for print and large heroes. Wide laptop frames especially benefit from a higher export scale.

Can I make a 3D laptop mockup?

Yes. Zepixo offers 3D laptop frames with camera and lighting controls. Keep the tilt modest so the website stays readable, and render a short spin video for social if you want motion.

Match the ratio, keep the chrome clean, and run the checklist, and your laptop and browser mockups will look exactly right.