Screenshot mockup generator

A raw screenshot dropped into a slide, blog post or release note often looks unfinished: its edges blend into the page and readers cannot tell at a glance what they are looking at. A frame gives context. A browser window says this is a website, a phone body says this is a mobile app, and a background with a soft shadow makes the image feel deliberate.

Your screenshot is framed in your browser and is not uploaded.

How to use it

1. Choose a screenshot. The tool works on one image at a time.
2. Pick a frame: browser window (light or dark, with address bar text you can edit), generic phone (rounded body, no brand) or simple card (rounded corners and a shadow only).
3. Choose the background: a solid color, a two-color gradient or transparent.
4. Adjust the padding around the frame and the shadow strength.
5. Export a PNG at 1x or 2x.

Choosing the right frame

Browser window suits websites, dashboards and web apps. Choose the light or dark version to match the screenshot, so the frame does not compete with the content. Use the address bar text to show a clean, readable address such as your domain name. This is also a privacy step: real address bars often contain session codes, search terms or account IDs that should not appear in public images.

Generic phone suits mobile screenshots from any device. It deliberately has no brand, no logo and no trademarked device design, so you can use it for Android and iPhone screenshots alike without implying a specific product.

Simple card is for fragments: a dialog, a chart, a code snippet or a single interface component. Rounded corners and a shadow are enough to lift it from the page.

Before framing, check the screenshot itself for names, email addresses or notifications you would rather not publish. Blur and redact can cover them with a solid box.

Backgrounds, padding and the 1x or 2x choice

A two-color gradient works well for marketing pages and social posts. A solid color matching your slide or brand looks calmer. A transparent background lets you place the framed screenshot on any colored section later, with the shadow blending into it naturally.

Padding gives the frame and the shadow room. Generous padding suits social posts; tight padding suits documentation, where the screenshot should stay large.

2x doubles the output dimensions so the frame, corners and shadow stay crisp on high-density screens and survive downscaling by websites and slide software. The file is larger. 1x is enough for email and quick internal notes. Neither option can add detail that the screenshot did not have.

Framed PNGs can be large. If the file needs to be smaller, the PNG compressor works especially well on screenshots, which have fewer colors than photos. For plain borders without a device frame, see Add border and rounded corners.