Tool2Help

Device Mockup Generator

Drop in a screenshot, pick a device frame, and download a presentation-ready mockup as a PNG.

Drop a screenshot here, or

The image is read on your device and never uploaded.

Add a screenshot to see the mockup.

About the device mockup

Screenshots look unfinished in a pitch deck or on a landing page. Wrapping one in a device frame gives it context and makes it read as a real product. Upload your screenshot, choose a phone, tablet, laptop or desktop frame, adjust the background and shadow, and download the composite. The whole thing is composed on a canvas element in your browser, so your unreleased product screenshots are never uploaded to anyone server.

How to use the device mockup

  1. Upload a screenshot, or drag and drop the image file onto the drop zone.
  2. Choose the device frame that matches your screenshot aspect ratio.
  3. Adjust the background color, padding and shadow to suit where the mockup will be used.
  4. Download the finished mockup as a PNG.

Frequently asked questions

Is my screenshot uploaded anywhere?
No. The image is read with the browser FileReader API and composed on a local canvas. It never leaves your device, which matters when the screenshot shows an unreleased product or customer data.
What screenshot size should I use?
Match the aspect ratio of the frame you have chosen, and use the highest resolution you have. The tool scales the image to fit, so a larger source produces a sharper result. Screenshots taken on a modern phone are typically more than adequate.
Can I use these mockups commercially?
The frames here are generic device shapes drawn programmatically rather than renders of specific branded hardware, so there is no licensing restriction on the output. Your own screenshot content is your responsibility.

Other free tools people use alongside the Device Mockup.

Font Pairing Test how a heading font and a body font look together, using your own copy rather than a generic pangram. Design Sketch Pad Draw directly in your browser with adjustable brushes and colors, then download the result as a PNG. Design Placeholder Generator Generate placeholder text by paragraph, sentence or word count, and placeholder images at any dimensions you need. Design Color Picker Pick a color visually, refine it with precise sliders, and copy it in whichever notation your project needs. Color