Device Mockup Generator
Show your app or website on phones, tablets, laptops and watches, in your browser.
Mockup
About the Device Mockup Generator
Show a screenshot of your app or website the way people will see it: inside a phone (with a notch or a punch-hole camera), a tablet, a laptop, a desktop monitor or a smartwatch, in portrait or landscape. Build a scene of several devices — a laptop with a phone, a monitor with a tablet and a phone, or two or three phones — each with its own screenshot, and give them a gentle 3D tilt, a soft shadow and a finish from black to silver, champagne or blue.
The devices are original, generic drawings made of simple shapes — no manufacturer’s product artwork or logo — so the mockup is yours to use. Download it with a transparent background for slides and web pages, or on a gradient, mesh or colour, as PNG, WebP or JPG up to 4,000 pixels, or at a ready-made size for a post. Everything is drawn in your browser; the screenshots never leave your device.
How to use it
- Choose or drop one or more screenshots (or paste one with Ctrl+V). With several, each device gets the next one.
- Under Devices, pick a Scene — one device, or several — and, for one device or phones, which Device and the Orientation. Choose a Finish.
- Under Screenshots, change the picture of any device, and choose whether it fills the screen (cropped; pick which part stays visible) or is fitted whole.
- Add a Tilt preset or your own turn and lean, and a Shadow. Keep the background None for a transparent PNG, or pick a gradient, mesh or colour.
- Set the Size (the longest side, or a social size) and the Padding, choose PNG, WebP or JPG, and Download or Copy image.
Examples
Screenshot 1,170 × 2,532 · One device · Phone with notch · Fill, top · Shadow Soft · Background None · Padding 6 % · Longest side 2,400 px · PNG
A 1,260 × 2,400 px transparent PNG: the phone with the top of the screenshot in its screen and a soft shadow.
At this size the phone’s screen is 991 × 2,160 pixels, so the 1,170 × 2,532 screenshot is reduced, never enlarged, and stays sharp.
Scene: Monitor, tablet and phone · three screenshots (desktop, tablet and phone widths) · Turned right 20° · Gradient Ice · 1,600 px
A 1,600 × 1,171 px image: a monitor on its stand with a tablet and a phone in front of it, each showing its own screenshot.
Common uses
- Landing pages, app store listings and launch posts.
- Pitch decks, portfolios and case studies.
- Showing a responsive website on desktop, tablet and phone at once.
- Social media posts about a new feature or update.
- Client presentations of a design before it is built.
Getting sharp mockups
- Use screenshots at the device’s real resolution: a phone capture (often 1,080–1,290 pixels wide) for phones, a desktop capture for the laptop and monitor. The page warns you when a screenshot has to be enlarged more than 1.5× to fill its screen.
- Fill crops a screenshot to the screen’s shape; choose Top for long pages so the header stays visible. Fit whole shows all of it, with a colour around it.
- A longest side of 2,400 pixels is sharp on Retina screens and in slides; 4,000 is for print and very large displays.
- Keep the background None to place the mockup on any colour later — PNG and WebP keep the transparency, JPG puts it on white.
About the device frames
Each device is drawn from rectangles, rounded corners and circles: a coloured rim, a black bezel, the screen and details such as a notch, a camera, buttons, a keyboard base, a stand or straps. Their proportions are typical of each kind of device — a phone screen of about 9:19.5, a 16:10 laptop and a 16:9 monitor — but they are not pictures of any real product and carry no maker’s name or logo.
Limitations
- The frames are generic and flat-shaded: there are no photographic reflections, materials or real product models.
- The tilt is each device seen in perspective; devices do not cast shadows on one another.
- Scenes have fixed arrangements (you choose the devices and screenshots, not their exact positions).
- Pictures are at most 8,192 pixels on a side; WebP in Safari takes a moment longer to make.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Are my screenshots uploaded?
No. They are opened and drawn by your browser on your device, and the download is made there too. Only your settings are remembered in this browser.
Can I use the mockups commercially?
Yes. The frames are original drawings made by this tool and nothing is added to your image; under the terms you may use what you make here for personal and commercial purposes. You need the right to use the screenshots you put in.
How do I get a transparent background?
Keep Background: None and download a PNG or WebP. The shadow stays semi-transparent, so it looks right on any colour.
Can each device show a different screenshot?
Yes. Choose several screenshots at once and they fill the devices in order, or press Change… next to a device under Screenshots.
Why is there a black area in the screen?
With Fit whole, a screenshot of another shape leaves space around it, shown in the screen colour you pick. Use Fill to cover the whole screen, or take a screenshot of the device’s shape.
Can I add a background or a browser frame instead?
For a screenshot in a browser window on a background, use the Screenshot Beautifier.