How to Crop Browser Chrome from Screen Recordings

Browser chrome — the URL bar, tabs, bookmarks, and browser frame — consumes 80-120 pixels at the top of your recording while adding zero value. Here's how to remove it cleanly.

Method 1: Record in full-screen mode

The simplest approach: put your browser in full-screen (F11 or Cmd+Shift+F on macOS) before recording. The OS hides the browser chrome entirely, leaving only your application.

Considerations:

• Works perfectly if your app handles full-width layouts well
• Auto-hide toolbars may briefly appear when moving the cursor to the top — avoid that area during recording
• Your app's responsive breakpoints may shift at full-screen width

Method 2: Window capture (not screen capture)

Most recording tools offer "window capture" vs "screen capture." Window capture records only the content area of a specific window, excluding the window frame and OS chrome.

In OBS: Sources → Window Capture → select your browser. Then in the source properties, check "Capture Method: Window Capture" and enable "Exclude Window Chrome" if available.

Method 3: Post-production crop

If you recorded the full screen including browser chrome:

1. Import into your editor
2. Crop 80-120px from the top (depending on browser and OS)
3. Scale the result back to your target resolution

The math for a 1080p recording with ~100px chrome: cropping leaves you with 1920×980. Scale to 1920×1080 — this is a 10% upscale, which is noticeable on text. Better approach: record at 1440p and crop, then export at 1080p — the downscale after crop maintains full quality.

Method 4: Dedicated recording viewport

Set your browser to a specific window size that accounts for chrome removal:

1. Open DevTools (Cmd+Option+I)
2. Click the "responsive design" toggle
3. Set viewport to exactly 1920×1080
4. Record only the viewport area (your recording tool should let you select a region)

This gives you a pixel-perfect 1080p app recording with zero chrome, no cropping, and no scaling artifacts.

When to KEEP the browser chrome

Sometimes the URL bar and browser context are useful:

• Showing a URL for context: If you want viewers to see it's a web app at your-product.com
• Demonstrating extensions or bookmarklets: The chrome IS the feature
• Security/trust signals: Showing HTTPS, domain name for banking/security products
• Installation flows: Progressive web app install prompts live in the chrome

If keeping chrome, clean it first: close other tabs, hide bookmarks bar, remove extension icons, and ensure the URL shows your production domain (not localhost).

Replacing chrome with a device frame

An alternative to removing chrome entirely: replace it with a minimal, designed browser frame mockup. This gives context ("this is a web app") without showing your actual tabs, bookmarks, and messy URL bar.

Many product landing pages use this technique — a clean Safari or Chrome frame with just the URL bar, wrapped around the app screenshot or recording. Tools like Screely or a simple Figma template work for screenshots; for video, create the frame as an overlay in your editor.