Light or dark browser frame — which should I use?

Match the screenshot. A light frame suits a light-themed app and white page backgrounds; a dark frame keeps a dark-mode screenshot from looking like it's floating in a white box.

What size should a mockup be for social posts?

Use 1200×630 for link previews on LinkedIn, X and Slack, 1:1 for square feed posts, and 16:9 for slides and video thumbnails. The canvas grows around your screenshot instead of cropping it.

Can I get a transparent background?

Yes. Choose No background and download a PNG: the area around the window stays transparent, so you can place the mockup on any page color. JPEG has no transparency, so it fills that area with white.

Does the frame show a web address?

No. The bar shows the window controls only, so a staging URL or a competitor's tab never ends up in your visual.

Yes. There's no account, no watermark and no paid export size: 2× PNG and JPEG downloads are included. Arclet makes interactive product demos; this tool is free because good screenshots are where most demos start.

Browser mockup generator

Drop in a screenshot and it sits in a browser window on a background that's ready for a landing page, slide or social post. It's the same window frame Arclet's interactive demos use.

Bring your screenshots to life as an interactive demo, free to get started.

Start for free

How it works

Make a browser mockup

Drop in a screenshot and it sits in a browser window on a background that's ready for a landing page, slide or social post. It's the same window frame Arclet's interactive demos use.

Step 1

Add your screenshot

Paste, drop or choose a screenshot of your app or site. It opens in a light browser window on a purple gradient.

Step 2

Style the window

Switch between light and dark browser frames, pick one of five gradients or your own color, and set the padding, corner radius and shadow.

Step 3

Size it for where it goes

Keep the natural size, or choose 16:9 for slides, 1:1 for social feeds, or 1200×630 for link previews. Then download a 2× PNG.

Before and after

A raw capture becomes a visual ready for a landing page: browser frame, gradient, padding and shadow.

A raw screenshot of the Arclet share dialog over an analytics chart, with no frame or background — Before

The share dialog screenshot inside a light browser window with rounded corners and a soft shadow on a purple gradient — After

Frequently asked questions

Everything you need to know to get started today.

More free tools

MacBook mockup generator

Put a screenshot on a laptop screen for decks and launch posts.

Screenshot editor

Blur, annotate, frame and download a screenshot in one place.

Blur screenshot

Hide names, emails and keys before you share a screenshot.

All free tools

Every screenshot tool on one page.

Screenshots show a moment. Demos show the whole flow.

Record a workflow once in your browser and share a demo people can click through.

Start for free