Screenshot Mockup Generator
Turn a web or app screenshot into a mockup for your portfolio, launch page or docs. Choose a frame and background, adjust the crop, and download a PNG while your screenshot stays in your browser.
Screenshot studio
Frame your screenshot, set the scene, and export a polished PNG.
Give your screenshot a stage
PNG, JPEG or WebP · up to 20 MB and 32 million pixels
You can also paste a screenshot from your clipboard.
Your screenshots stay in your browser. Background presets are downloaded when selected.
Production notes
How do you keep the screenshot easy to read?
Start with what you want to show: the whole interface or one detail. The default keeps the whole screenshot, which works well for page structure and complete workflows. Choose a 3:2 crop for a landscape composition or 9:16 for portrait, then move the crop to keep key text and controls visible. Switch back to the whole image to restore the full view.
A browser frame gives a website context; a window or laptop suits a desktop app; a phone or tablet suits a mobile interface. Plain adds no device frame. Let the background support the screenshot: gradients keep it simple, the two pregenerated scenes add a setting, and transparency fits an existing layout. Less padding and tilt usually make small text easier to read.
Before downloading, check the actual pixel dimensions, not just 1× or 2×. Output is capped at 4096 pixels on the longest side and 8 million pixels in total, so larger compositions are scaled down. Enlarging a screenshot does not add detail; start with a clearer source if the text is already blurry.
Screenshot Mockup Generator
- 1Drop, choose or paste a PNG, JPEG or WebP screenshot, up to 20 MB and 32 million pixels.
- 2Keep the whole screenshot, or choose a 3:2 or 9:16 crop and adjust its position.
- 3Choose a frame and a gradient, studio scene or transparent background; adjust padding, corners and shadow.
- 4Choose 1× or 2×, check the actual PNG dimensions, then download. The preview and download use the same canvas.
Screenshot Mockup Generator
- Keep the context: the whole screenshot is shown by default; cropping is your choice.
- Set the scene: seven frame options, gradient backgrounds and two curated, pregenerated scenes.
- Work locally: your screenshot stays in the browser and is not sent to an image generation service.
- Keep designing: export a PNG with a background or transparency for slides, docs and web pages.
Frequently asked questions
Which image formats and sizes can I use?
Choose, drop or paste a PNG, JPEG or WebP image up to 20 MB and 32 million pixels. Resize images that exceed either limit before adding them.
Will my screenshot be cropped automatically?
The whole screenshot is kept by default. Choosing 3:2 or 9:16 crops it to that ratio. You can move the crop or switch back to the whole image.
Which frames are included? Are they official device assets?
The seven options are Browser, Mac window, iPhone, Android, Tablet, Laptop and Plain. Frames are generic shapes drawn with code, not official hardware artwork. You remain responsible for the rights to your screenshot and its use wherever you publish.
How large is a 2× export?
1× and 2× request an export scale, but the result is capped at 4096 pixels on the longest side and 8 million pixels in total. The workspace shows the actual PNG dimensions. Large compositions are reduced, and upscaling adds no source detail.
Can I export a transparent background?
Yes. With transparency selected, the PNG keeps your screenshot, selected frame and shadow while leaving the background transparent for slides or an existing design.
Is my screenshot uploaded or sent to AI?
No. Your browser reads and composites the screenshot locally. The two scene backgrounds are pregenerated static images served by this site; choosing one loads the background without sending your screenshot to an image generation service.
Updated · MockCat team
Sources and image limits
- Your screenshot stays local
- Your browser reads and composites the screenshot on your device. It is not uploaded or sent to an image generation service.
- Backgrounds and examples
- The two studio scenes are static AI-generated images loaded from this site. MockCat made the sample interface for illustration; it is not a customer example.
- Frames and usage rights
- Frames are generic shapes drawn with code, not official hardware assets. You are responsible for the rights to your screenshot and the rules of the platform where you publish.
- Check the PNG dimensions
- Check the actual dimensions shown in the editor: at most 4096 pixels on the longest side and 8 million pixels in total. Larger compositions are reduced. Upscaling adds no detail to your screenshot.