Are the device frames trademarked designs?

No. The frames are generic vector drawings — rounded bodies, a pill or punch-hole camera, neutral window buttons — with no logos, model names or exact replicas of a specific product, so they’re fine for promo images and portfolios. If you need official device artwork, use the manufacturer’s marketing resources and follow their guidelines.

How does the perspective tilt work — won’t it blur or distort?

The whole device, screenshot included, is first drawn flat at the target size. The three rotation angles and the perspective strength then give the projected positions of the four corners, and every output pixel is inverse-mapped through a homography with bilinear sampling. The corners land exactly on the projected points with true foreshortening, and the frame is rendered at a higher resolution where the tilt magnifies it so the near side stays sharp.

What if my screenshot doesn’t match the screen ratio?

By default it’s cropped to fill, and long screenshots can be top-aligned so only the first screen shows. Choose “Show all” to keep everything with bars at the sides or top and bottom. For browser windows and monitors, which have no fixed ratio, tick “Screen ratio follows the screenshot” and the screen is built around your image with no cropping at all.

Can I export a transparent background, and how big?

Yes. With the background set to Transparent the PNG keeps its alpha channel, including a soft semi-transparent shadow, ready for slides, web pages or design files. Pick a long side of 1080, 1920, 2560 or 3840 px (4K) and a ratio of 16:9, 4:3, 3:2, 1:1, 4:5, 9:16 or 21:9.

📴

📴Device Mockup Generator - Phone, Laptop & Browser Frames

A bare screenshot looks flat on a landing page, an app store listing or a portfolio — drop it into a device frame and it instantly reads as a real product. This tool draws eight generic vector device frames itself: a full-screen phone with a pill-shaped cutout, an Android phone with a punch-hole camera, a tablet, a laptop, a desktop monitor, light and dark browser windows, and a smartwatch, in black, silver, sand or navy. They’re generic shapes with no logos or brand marks. Each screenshot can be cropped to fill (with top alignment for long pages), shown in full or stretched, and browser or monitor screens can take the screenshot’s own ratio. Every device has its own size, position and rotation on the X, Y and Z axes; perspective tilt is rendered with a per-pixel homography warp, so the corners land exactly where they should and the edges are anti-aliased rather than simply skewed. Put up to four devices in one scene — templates include phone + laptop, tablet + phone, three phones, monitor + watch and an isometric layout — and drag them around right on the preview. Pick a gradient, solid, transparent or image background, adjust shadow and perspective strength, and export a PNG up to 3840 px (4K) at 16:9, 4:5, 1:1, 9:16 and more. Everything runs locally in your browser; screenshots are never uploaded.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use Device Mockup Generator

1Upload one or more screenshots and pick a scene template, such as phone + laptop
2Select a device and set its type, colour, screenshot fit and perspective, then drag it into place on the preview
3Choose a background, shadow and canvas ratio, and export a PNG up to 4K

FAQ

Are the device frames trademarked designs?: No. The frames are generic vector drawings — rounded bodies, a pill or punch-hole camera, neutral window buttons — with no logos, model names or exact replicas of a specific product, so they’re fine for promo images and portfolios. If you need official device artwork, use the manufacturer’s marketing resources and follow their guidelines.
How does the perspective tilt work — won’t it blur or distort?: The whole device, screenshot included, is first drawn flat at the target size. The three rotation angles and the perspective strength then give the projected positions of the four corners, and every output pixel is inverse-mapped through a homography with bilinear sampling. The corners land exactly on the projected points with true foreshortening, and the frame is rendered at a higher resolution where the tilt magnifies it so the near side stays sharp.
What if my screenshot doesn’t match the screen ratio?: By default it’s cropped to fill, and long screenshots can be top-aligned so only the first screen shows. Choose “Show all” to keep everything with bars at the sides or top and bottom. For browser windows and monitors, which have no fixed ratio, tick “Screen ratio follows the screenshot” and the screen is built around your image with no cropping at all.
Can I export a transparent background, and how big?: Yes. With the background set to Transparent the PNG keeps its alpha channel, including a soft semi-transparent shadow, ready for slides, web pages or design files. Pick a long side of 1080, 1920, 2560 or 3840 px (4K) and a ratio of 16:9, 4:3, 3:2, 1:1, 4:5, 9:16 or 21:9.