# Browser Mockup Studio

> Drop a screenshot into a clean browser frame on a styled background. Export for OG, X, or square sizes as PNG or WebP. In your browser, no signup, no watermark.

Free browser mockup generator. Drop a product screenshot and get it framed in a clean browser window (light or dark, with an editable URL bar) on a solid or gradient background, with padding, corner radius, and shadow controls. Export at launch-ready canvas sizes (OG 1200x630, X 1600x900, square 1080, or auto) as PNG or WebP. Runs entirely in your browser: no upload, no signup, no watermark.

## Command line (recommended for agents)

npx @brandstack/cli browser-mockup <screenshot> [settings link] [--bg hex|hex-hex] [--size auto|og-image|x-post|square-post|dribbble-shot] [--pad 0..0.2] [--radius 0..40] [--shadow 0..1] [--theme light|dark] [--url <text>] [--format png|webp] [--out <dir or file>]: offline; same pixels as the website export. --list prints the canvas sizes.

The CLI runs the same engine as this page — same logic, same output contract — with no browser and no account. Browser automation below is the fallback.

## How to use it

1. Agents: run `npx @brandstack/cli browser-mockup ./screens/dashboard.png "<settings link>" --out ./social`. The URL carries the background, canvas size, padding, radius, shadow, theme, URL text, and format.
2. In the browser: drop, paste, or upload a screenshot. Pick a background (solid or gradient preset), a canvas size, the window theme, and tune padding, corner radius, and shadow with the sliders. The preview redraws live.
3. Type the address you want shown in the window's URL bar.
4. Export with the button named "Download mockup". "Copy settings link" carries the whole look in the URL (the CLI accepts that link directly); "Copy agent prompt" hands everything to Claude Code, Codex, or Cursor.

## URL parameters

The page reads these query parameters on load, so a link can carry a complete setup:

- `bg`: Background: RRGGBB for a solid, RRGGBB-RRGGBB for a gradient
- `size`: Canvas preset: auto, og-image, x-post, square-post, dribbble-shot
- `format`: Export format: png or webp
- `pad`: Padding fraction 0..0.2
- `radius`: Window corner radius 0..40
- `shadow`: Shadow intensity 0..1
- `theme`: Window theme: light or dark
- `url`: URL-bar text

## Output

One file named browser-mockup-<width>x<height>.<png|webp>: the screenshot framed in a browser window (traffic lights, URL bar) on the chosen background, at the chosen canvas size. The settings link reproduces the full look; only the screenshot travels separately.

## Links

- Use the tool: https://www.brandstack.dev/tools/browser-mockup
- All free tools: https://www.brandstack.dev/tools (markdown: https://www.brandstack.dev/tools.md)
- Agent index: https://www.brandstack.dev/llms.txt

Browser Mockup Studio is a free tool by Brand Stack, the AI photo studio for
product marketing. No ads, no signup. Start free: https://www.brandstack.dev/sign-up