Device Mockup Generator

A device mockup generator drops any screenshot into a realistic device frame, turning a plain image into a polished, presentation-ready visual in seconds. It is perfect for showcasing an app, a website, or a design concept without opening Photoshop or hunting for a Figma plugin.

Pick from five device types — iPhone, Android, iPad, MacBook, and a desktop Monitor — each drawn with accurate proportions and authentic touches like the Dynamic Island, punch-hole camera, webcam notch, and laptop or monitor stand. Add a solid, gradient, or transparent background, tune the padding, and export a crisp PNG.

Private by design: every mockup is rendered in your browser with the HTML Canvas API. Your screenshots are never uploaded to a server, stored, or tracked.

How to Use the Device Mockup Generator

Upload your screenshot

Drag and drop an image onto the upload area, click it to browse, or press Ctrl+V (Cmd+V on Mac) to paste from the clipboard. PNG, JPG, and WebP are all supported.

Choose a device

Select iPhone, Android, iPad, MacBook, or Monitor from the toolbar. Your screenshot is auto-fitted to the screen, then pick a device color from the swatches that change per device.

Style the background

Switch between a Solid color (picker plus eight presets), a Gradient (eight presets), or None for a transparent export. Then drag the Padding slider to set the spacing around the device.

Download the PNG

Click Download PNG to save a high-resolution mockup rendered at 3x scale, ready for app store listings, presentations, social posts, or your portfolio.

Features

Five Device Types

Frame your screenshot in an iPhone, Android phone, iPad, MacBook, or desktop monitor, each with realistic proportions.

Authentic Device Details

Dynamic Island, Android punch-hole camera, iPad camera dot, MacBook webcam notch and hinge, and a monitor neck and base.

Per-Device Color Options

Each device offers its own color swatches — black, silver, blue, gold, white, green, midnight, and space gray — to match your brand.

Solid Color Backgrounds

Use the color picker for any shade or tap one of eight presets, from indigo and sky blue to emerald, amber, and slate.

Gradient Backgrounds

Choose from eight gradient presets — indigo-purple, sunset, ocean, emerald, and more — for eye-catching marketing visuals.

Transparent Export

Pick the None background to export a transparent PNG, ideal for layering on slides or compositing into other designs.

Adjustable Padding

Slide the padding control to add or remove space around the device frame, anywhere from edge-to-edge to roomy margins.

Smart Image Fitting

Screenshots are scaled and centered with cover-fit cropping, so any aspect ratio fills the device screen cleanly.

High-Resolution PNG

Exports render at 3x scale for crisp output suited to retina displays, app store screenshots, and print.

Drag, Click, or Paste

Add a screenshot however you like — drag and drop a file, click to browse, or paste straight from the clipboard.

Frequently Asked Questions

How do I put a screenshot in a phone mockup?

Upload your screenshot by dragging it onto the upload area, clicking to browse, or pasting with Ctrl+V. Then choose iPhone or Android, and the image is automatically fitted inside the device frame. Pick a color and background, and download the PNG.

What devices are supported?

Five device types: iPhone (with Dynamic Island), Android phone (punch-hole camera), iPad, MacBook, and a desktop monitor. Each frame is drawn programmatically with accurate proportions and device-specific details.

What image formats can I upload?

PNG, JPG, and WebP images all work. Any standard screenshot or image file from your device or clipboard can be dropped into a mockup.

Can I export a transparent PNG mockup?

Yes. Select the None background option to export a PNG with full transparency. This is handy when you want to place the mockup on top of slides, other designs, or a custom backdrop.

What resolution is the exported image?

The PNG is rendered at 3x the preview resolution, producing sharp images suitable for retina displays, App Store screenshots, and high-quality print. The exact pixel size depends on the device you choose and the padding you set.

Why does my screenshot look cropped in the device?

The tool uses cover-fit scaling to fill the device screen completely, so if your screenshot has a different aspect ratio than the device, some edges are cropped to keep a clean fit. For best results, use a screenshot that roughly matches the target device's aspect ratio.

Are my images uploaded to a server?

No. Everything runs locally in your browser using the HTML Canvas API. Your images never leave your device and are not stored or transmitted anywhere.

Can I use the mockups commercially?

Yes. The device frames are stylized shapes drawn with code — not photographs or trademarked assets — so you can use the generated mockups freely in both personal and commercial projects.