Sifency Tools
Let’s Talk

Browser window mockup generator

A browser window tells a viewer at a glance that the picture is a web page. The frame adds a slim toolbar with three dots and an empty address field above your screenshot, and nothing else, so the page stays the hero. Nothing is uploaded: the picture is drawn in your browser.

Studio

Your screenshot appears here

Drop, paste or browse for a screenshot, or try an example.

Drop a screenshot here

Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.

Browser window frame · no screenshot yet

Export

Saves as mockup-browser-1200x630.png · 1200 × 630 px · PNG · 1x

Copy image always copies a PNG at the chosen scale.

Add a screenshot to enable Download and Copy image.

More mockup ideas

How it works

  1. Add a screenshot

    Drop, paste or browse for a screenshot of your design (PNG, JPG, WebP, GIF, AVIF or BMP), or start with an example. Your own browser reads it and nothing is uploaded.

  2. Choose a device and a background

    Pick a phone, tablet, laptop, browser window or monitor, then set a solid, gradient, mesh or transparent background, the padding, the corner radius, the shadow, the bezel colour and, if you like, a second device.

  3. Pick a size

    Use a ready-made size for a marketplace preview, a Product Hunt gallery, Dribbble, Behance or a social post, or type your own width and height.

  4. Download or copy

    Save the mockup as a PNG or WebP at normal or double size, or copy it straight to your clipboard to paste into a chat or a document.

Questions about a browser window mockup

How do I make a browser window mockup?

Drop, paste or browse for a screenshot, or try the example. The browser window frame is drawn around it at once. Then open Size and choose Open Graph (1200 × 630 px), and change the background, padding and shadow as you like. Capture only the page itself, without your own browser's toolbar, because the frame already draws one. Two toolbars stacked together look odd.

Is the address bar editable?

No. The toolbar is a simple, empty shape on purpose, so there is no web address, no brand and no tab title to get wrong. If you need a visible address, add it to your own screenshot before you drop it in.

Which image size should I use for a browser window mockup?

A link preview size is wide and short, which suits a browser window well and keeps the page readable when it is shown small in a chat or a feed. In the Size list choose Open Graph, which is 1200 × 630 px.

Is anything uploaded when I make a browser window mockup?

No. Your screenshot is read and drawn into the browser window frame by your own browser, so the picture behind your browser window mockup never reaches a server, and Download and Copy image work on your device.

Next step

Fill the rest of the page with placeholders

A mockup often needs filler images around it. Make exact-size colour placeholders with proper file names, and download a whole set as one ZIP.

Make placeholder images
View all tools
Contrast CheckerCheck WCAG contrast and fix failing colours in one click.Open toolColour Placeholder GeneratorExact-size placeholder images in any colour, named for you.Open toolPalette from ImageDrop an image, get a palette you can paste into code.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open tool

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.