Screenshot Mockup Generator
Put a screenshot inside a browser window, app window, phone, tablet or laptop frame with a gradient or solid background and shadow. Download a PNG.
Runs entirely in your browser. Your data is never uploaded.
What is Screenshot Mockup?
The Screenshot Mockup tool frames your screenshot in a clean, generic device or window: a light or dark browser window with your URL in the address bar, a plain app window, a phone, a tablet or a laptop. Add a gradient, solid or transparent background, padding and a drop shadow, then export a PNG ready for landing pages, docs or social posts.
How to use Screenshot Mockup
- Drop, choose or paste a screenshot.
- Choose a Frame and, for browser frames, type the Address bar text.
- Pick the Background (gradient, solid color or transparent), its colors, the Padding and Drop shadow.
- Download the PNG mockup.
Example
40×20 screenshot, frame Browser window (light), padding 0, transparent background
40×64 PNG: a 44 px title bar with window dots and address bar above the screenshot
When to use Screenshot Mockup
Use it to make screenshots look polished in product pages, README files, changelogs, presentations or tweets. For photorealistic device renders or perspective mockups, use a dedicated design tool.
How Screenshot Mockup works
Everything is drawn on a canvas. Browser and app windows are sized to the screenshot (a title bar is added above it, with sizes scaled to the screenshot width), so the screenshot keeps its full resolution. Phone, tablet and laptop frames use fixed screen aspect ratios (19.5:9, 4:3 and 16:10): the screenshot is scaled to the screen width and drawn from the top, with the overflow clipped. The frames are simple generic shapes, not replicas of specific branded devices.
Common Use Cases
- Showcasing a web app screenshot on a landing page.
- Adding a browser frame to screenshots in documentation.
- Creating a phone mockup of a mobile site for social media.
- Making consistent changelog images with a branded gradient background.
Security Note
Images are decoded, processed and encoded locally in your browser with the Canvas API. Nothing is uploaded to a server.
FAQs
Will my screenshot be resized?
In browser and app frames it keeps its original size. In phone, tablet and laptop frames it is scaled to the screen width and cropped at the bottom if it is taller than the screen.
Can I get a transparent background?
Yes, choose Transparent as the background; the PNG keeps transparency around the frame and shadow.
Are these real device models?
No. The frames are neutral, generic designs so they can be used freely without trademark concerns.