---
title: Browser Mockup Studio
description: Free browser mockup generator. Frame a product screenshot in a clean browser window on a styled background and export it at launch-ready sizes, no signup.
---

The Browser Mockup Studio is a free tool at [brandstack.dev/tools/browser-mockup](https://brandstack.dev/tools/browser-mockup). It frames a raw product screenshot in a procedurally drawn browser window (traffic lights, editable URL bar, light or dark) on a solid or gradient background, and exports it at the canvas sizes a launch actually ships. Everything runs in your browser; the screenshot is never uploaded.

## Run it from the command line (recommended for agents)

```sh
npx @brandstack/cli browser-mockup ./screens/dashboard.png \
  --size og-image --theme dark --url yourproduct.com --out ./social
```

Offline, no account. The file is named `browser-mockup-<width>x<height>.<png|webp>`. `--list` prints the canvas presets:

| Preset | Size | Ships to |
|--------|------|----------|
| `auto` | wraps the screenshot | docs, READMEs, changelogs |
| `og-image` | 1200x630 | link previews everywhere |
| `x-post` | 1600x900 | X posts |
| `square-post` | 1080x1080 | Instagram, LinkedIn |
| `dribbble-shot` | 1600x1200 | Dribbble, portfolio |

A **settings link is itself a valid command**. Tune the look visually, click "Copy settings link", and pass the URL:

```sh
npx @brandstack/cli browser-mockup ./screens/dashboard.png "https://brandstack.dev/tools/browser-mockup?bg=4f46e5-ec4899&size=x-post&theme=light&url=yourproduct.com" --out ./social
```

## What you can tune

- **Background**: seven curated gradients, any solid color, or a custom two-color gradient.
- **Window theme**: light or dark chrome, with an editable URL-bar text.
- **Padding, corner radius, and shadow** sliders. The shadow is drawn as deterministic layers (no platform blur), which is why the CLI and the browser produce the same pixels.
- **Export format**: PNG or WebP at full canvas resolution.

## Why the pixels match everywhere

The compositor is the same isomorphic engine code in the browser tool and the CLI, held to pixel parity by golden tests in CI. That makes the tool scriptable: a CI job can regenerate every social frame from fresh screenshots on each release, using the exact look someone tuned visually once.

## From frame to real scene

A framed screenshot is the fast version of the job. When the launch needs the screenshot inside a photoreal scene (on a laptop in an office, on a phone in a hand, with your brand in the shot), that is [Brand Stack](https://brandstack.dev/)'s mockup studio. "Shoot this screenshot in a real scene" carries the screenshot you already attached across sign-up and into the studio, ready to generate.

## For AI agents

Prefer the CLI (above). The tool page pre-applies settings from URL parameters (`bg`, `size`, `format`, `pad`, `radius`, `shadow`, `theme`, `url`), and "Copy prompt for agent" packages the link, the CLI command, and the output contract. This page is also served as plain markdown at [/tools/browser-mockup.md](https://brandstack.dev/tools/browser-mockup.md), and listed with instructions in [/llms.txt](https://brandstack.dev/llms.txt).

## When to use this tool

- A changelog, blog post, or tweet needs a screenshot that does not look like a bare crop.
- The landing page hero needs the product shown in a browser at OG size, today.
- You keep re-framing the same screenshots by hand in a design tool after every UI change; hand the settings link to your coding agent and regenerate them in CI instead.
- You resized launch images with the [Launch Image Resizer](/tools/launch-image-resizer) and want the source shot to look designed first.