What a screenshot mockup is for
A raw screenshot on a white page blends into the page around it. Put into a window or a phone and set on a colored background with some space and a soft shadow, it reads as a product shot: for a launch post, a portfolio, a slide, a help article or an app store page. This generator draws the frame itself, so you need no design app and no template file, and the screenshot never leaves your device.
Frames and backgrounds
| Option | What you get |
|---|---|
| Browser | A plain window with a title bar, three dots and an optional address bar text, in light or dark. The bar is 3.5% of the screenshot width tall. |
| Phone | A generic rounded phone body with an even border of 4% of the screenshot width around the screen, in light or dark. No buttons, cutouts or brand shapes. |
| None | The screenshot alone, with rounded corners and a shadow that follows its outline. |
| Gradient | Eight soft two-color gradients from corner to corner. |
| Color | Any solid color from the color picker. |
| Blurred | A heavily blurred copy of your own screenshot, which matches its colors. |
| Transparent | No background at all, for placing the mockup on a slide or a web page. Save as PNG to keep it. |
How the size is worked out
With Fit the screenshot, the file is your screenshot at its own pixels, plus the frame, plus the padding on every side. Padding is a share of the frame’s longer side. With a fixed output size, the padding is a share of the output’s shorter side, and the framed screenshot is scaled to fit the space that is left and centered, so nothing is cropped. Corner radius and shadow grow with the frame, so a mockup looks the same at every size.
An example: a 1440 × 900 screenshot in the browser frame gets a 50.4 px title bar, so the window is 1440 × 950.4 px. With 8% padding and Fit the screenshot, the file is 1,670 × 1,180 px. For a 1200 × 1200 square with the same 8% padding, 96 px stay free on each side, the window is scaled to 70% and becomes 1,008 × 665.3 px, with 267.4 px above and below it. At 2x every number doubles: the square is saved as 2400 × 2400 px.
How to make a screenshot mockup
- 1Drop a screenshot on the box, pick a file, or press Ctrl+V or Cmd+V to paste one from the clipboard.
- 2Choose a frame and a background, then set the padding, corner radius and shadow until the preview looks right.
- 3Pick an output size, PNG or JPEG and 1x or 2x, and download the mockup.
Tips for clean mockups
- Crop first: cut away menus, docks and empty space with the image cropper, then frame what is left.
- Hide private details: names, emails and numbers in a screenshot can be covered with the blur image tool before you share it.
- Size for the platform: the presets follow the social media image sizes list. For any other size, use Custom size here or scale the file later with the image resizer.
- PNG for text: screenshots are mostly text and sharp edges, which a lossless PNG keeps crisp. JPEG adds blur and color fringes around text, but makes smaller files when the background is a blurred image.
Sources
- MDN: Image file type and format guide: PNG is lossless with an alpha channel, JPEG is lossy without one, lossless is better for screenshots
- W3C: PNG Specification, Third Edition: lossless compression and an optional alpha channel
- MDN: Clipboard.read(): reading images from the clipboard, secure context and permission
Frequently asked questions
Is my screenshot uploaded?
No. Your browser opens the screenshot, draws the mockup on a canvas and saves the file on your device. Nothing is sent to a server, so you can use it for screenshots of work in progress or private dashboards.
How do I paste a screenshot?
Take the screenshot to the clipboard, then press Ctrl+V on Windows and Linux or Cmd+V on a Mac anywhere on this page. The Paste button does the same through the browser’s clipboard API; your browser may ask for permission first, and some browsers only offer it on secure pages.
Should I save as PNG or JPEG?
PNG for most screenshots. It is lossless, so text and sharp edges stay crisp, and it keeps a transparent background. JPEG is lossy and has no alpha channel, but it makes smaller files when the background is a photo or a blurred image. A transparent background turns white in a JPEG.
What does 2x do?
It doubles the width and height of the file, for screens with a high pixel density. The mockup only gets sharper if the screenshot has the pixels: a screenshot from a high-density display usually does, a small one gets enlarged and can look soft.
Which size should I use for social media?
Pick the platform and placement under Output size. The sizes come from the platforms’ own help pages, the same list as on our social media image sizes page. Fit the screenshot makes the file just as large as your screenshot plus the frame and padding.
Does the phone frame copy a real phone?
No. It is a plain rounded body with an even border around the screen, without buttons, cutouts or any brand’s design, so it works for screenshots from any phone.
Why does my screenshot look blurry in the preview?
The preview is drawn smaller to stay quick on large screenshots. The download is made at full size from the original pixels, so check the saved file at 100% zoom.