Can I get a mockup with a transparent background?

Yes. Type transparent in the background field and export as PNG, WebP or AVIF. The frame and shadow keep their transparency so you can place the image on any color.

Does the tool reduce the quality of my screenshot?

Not with PNG or WebP output: the screenshot is placed pixel for pixel, without resizing, and both formats are written losslessly here. JPEG and AVIF apply lossy compression according to the quality setting.

Which device does the phone frame represent?

None in particular. It is a generic dark phone outline with rounded corners and a notch, so it works for both iOS and Android screens without implying a specific model.

Can I add a URL or a title to the browser bar?

No. The browser bar shows only the three window dots. That keeps the frame neutral, and it avoids exposing a staging or internal URL.

Why is my mockup file so large?

The screenshot keeps its full resolution and PNG is lossless. Choose AVIF or JPEG with a quality around 80, crop the screenshot before framing, or compress the result afterwards.

Are my screenshots uploaded?

No. Everything runs locally in your browser through WebAssembly. Nothing is sent to or stored on a server.

Screenshot Mockup Frame: Browser and Phone

A raw screenshot dropped into a slide or a README looks like a fragment. Put the same pixels inside a browser window or a phone frame, on a colored background with a soft shadow, and it reads as a product. This screenshot mockup tool does exactly that in a few seconds: drop the image, pick a frame, set the background, and download a polished image ready for a landing page, pitch deck, App Store draft, changelog or social post. It is a quick win for designers, developers and product marketers who need clean visuals without opening a design file.

The three frame presets

Simple: rounds the corners of the screenshot itself and places it on the background with 48 pixels of padding and a drop shadow. Best for dashboards, cropped UI details and anything that should not look like a specific device.
Browser: adds a dark 44 pixel title bar above the screenshot with the three familiar window dots (pink, yellow, green), rounds the outer corners and places the window on the background with 52 pixels of padding. Best for website and web app screenshots. The bar has no address field or tab text, so it stays neutral across operating systems.
Phone: wraps the screenshot in a dark bezel with rounded screen corners and a notch at the top, on a background with 72 pixels of padding. Best for mobile app screens and responsive views captured at phone width. The frame is a generic phone outline, not a replica of a specific model.

How to make a screenshot mockup

Drop one or several screenshots (PNG, JPG, WebP, BMP, TIFF or AVIF) onto the tool.
Pick a preset: Simple, Browser or Phone.
Adjust background, corner radius, shadow blur and shadow opacity if the defaults do not fit your page.
Choose the output format and, for JPEG or AVIF, the quality.
Click Apply Mockup Frame, check the preview, then download the image (or a ZIP when you framed several).

Settings explained

Background: a six-digit hex color such as #0F172A (the default dark slate) or the word transparent. A transparent background gives you a framed screenshot with a shadow that you can lay over any section of a website or a slide with its own color.
Corner radius: from 0 to 200 pixels, default 24. In the Browser preset the radius shapes the outer window corners; in the Phone preset the bezel keeps a minimum radius of 30 so it always reads as a device, and the screen corners follow at roughly half the value.
Shadow blur: from 0 to 200, default 20. Low values give a tight, crisp shadow; higher values a wide, soft glow. Set it to 0 for a flat look.
Shadow opacity: from 0 to 1, default 0.35. Lower it on light backgrounds where a dark shadow looks heavy, or set 0 to remove the shadow entirely.
Output format and quality: PNG is lossless and the right default for UI with sharp text. JPEG and AVIF take a quality value from 1 to 100 (default 90) and produce much smaller files for photo-heavy screenshots. WebP is written losslessly here. JPEG has no transparency, so a transparent background becomes white in JPEG output.

Output size and resolution

The screenshot is never resized. The frame is built around it at its native pixel size, then the padding is added on every side. A 1440x900 screenshot in the Browser preset becomes a 1544x1048 image (1440 plus 2 x 52 wide, 900 plus the 44 pixel bar plus 2 x 52 tall). That is good for sharpness on retina displays, but large captures produce large files. If you need a smaller or lighter image for the web, run the result through the image compressor, or crop the screenshot to the relevant area first with the crop and rotate tool so the frame wraps only what matters.

Use cases

Landing pages and product pages: browser-framed screenshots on a brand-colored background, exported as PNG or AVIF.
Pitch decks and case studies: consistent frames for every slide, with a transparent background so they sit on any slide template.
Release notes and changelogs: frame a new feature screenshot in seconds, without opening Figma or Keynote.
Documentation and READMEs: a subtle Simple frame makes UI screenshots stand out from the surrounding text.

Batch framing

Drop a whole folder of screenshots and the same preset, colors and shadow apply to all of them. Each output is named after its source with a -mockup suffix, and when there is more than one file you get them in a single mockup-images.zip. This keeps a series of screenshots visually consistent, which is hard to achieve when framing them one by one in a design tool.

Compared with design tools

Figma, Sketch or Keynote give full control (device models, perspective, multi-screen scenes) but need a file and a template. This tool does one thing, a flat frame with a shadow, in one step. For detailed device renders, use a design tool; for fast, consistent frames on everyday screenshots, this is quicker.

Screenshots stay on your machine

Screenshots often show more than intended: customer names in a CRM, revenue in a dashboard, internal URLs, unreleased features, email addresses in a sidebar. Many online mockup generators upload the image to render it. Here the frame, shadow and encoding are computed by Rust code compiled to WebAssembly inside your browser tab, and no request sends the screenshot anywhere. You can verify it in the Network tab of your developer tools.

Frequently asked questions

Can I get a mockup with a transparent background?: Yes. Type transparent in the background field and export as PNG, WebP or AVIF. The frame and shadow keep their transparency so you can place the image on any color.
Does the tool reduce the quality of my screenshot?: Not with PNG or WebP output: the screenshot is placed pixel for pixel, without resizing, and both formats are written losslessly here. JPEG and AVIF apply lossy compression according to the quality setting.
Which device does the phone frame represent?: None in particular. It is a generic dark phone outline with rounded corners and a notch, so it works for both iOS and Android screens without implying a specific model.
Can I add a URL or a title to the browser bar?: No. The browser bar shows only the three window dots. That keeps the frame neutral, and it avoids exposing a staging or internal URL.
Why is my mockup file so large?: The screenshot keeps its full resolution and PNG is lossless. Choose AVIF or JPEG with a quality around 80, crop the screenshot before framing, or compress the result afterwards.
Are my screenshots uploaded?: No. Everything runs locally in your browser through WebAssembly. Nothing is sent to or stored on a server.