Device Mockup Generator

Present screenshots properly

A bare screenshot rarely does a product justice. Putting it into a device frame on a tidy background makes it look finished, and tells viewers instantly what kind of product they are looking at.

Device frame mode

1. Drop a screenshot onto the box.
2. Choose a device: Phone, Tablet, Laptop or Browser window.
3. Switch between a light and a dark frame. Dark frames suit bright screenshots and the other way around.
4. For the browser window, set the address text, for example your product URL.
5. Pick a background: a gradient preset, a solid colour or transparent.
6. Adjust the padding and choose a canvas shape. Auto fit wraps tightly around the device, while 16:9, 1:1, 4:5 and 1.91:1 are ready for slides, social posts and link previews.
7. Download the PNG.

Screenshot beautifier mode

Switch the mode to Screenshot beautifier to skip the device and polish the image itself. You can add a light or dark window bar with the three coloured dots, set the corner radius, dial the shadow up or down and choose the background. This is a quick way to get tidy images for documentation, release notes and posts.

Getting a sharp result

• Take the original screenshot at 2x resolution where possible. Phone screens look best at 1080 pixels wide or more.
• Use the size buttons: 1800 pixels is good for the web, 3000 pixels for print and retina hero images.
• Keep backgrounds calm. A subtle gradient that matches your brand beats a loud one.
• Remove personal data, API keys and real email addresses from screenshots before you share them.

Where to use mockups

Landing page hero sections, app store previews, Product Hunt launches, pitch decks, case studies and email newsletters.

Privacy

The mockup is rendered in your browser and the image is never uploaded.