Skip to content
ImgKiloImgKiloOpen tools

Device Mockup Generator

Device mockup generator

Drop a screenshot and frame it in a phone, iPhone, Android, iPad, MacBook or browser window. Set a gradient, solid or transparent backdrop, then tune the padding, shadow and tilt until it looks finished. Download as PNG or JPG, all in your browser, with nothing uploaded.

  • Files never leave your device
  • Runs in your browser
  • Free, no signup

How it works

  1. 1

    Drop a screenshot

    Add a JPG, PNG, WebP or AVIF. It is drawn to a canvas in your browser, with no upload.

  2. 2

    Choose a frame

    Pick a phone, tablet, laptop or browser. The screenshot drops straight into the device's screen.

  3. 3

    Backdrop and save

    Set the backdrop, padding, shadow and tilt, then download as PNG or JPG.

What this mockup generator gives you

Every frame in one tool

Phone, iPhone, Android, iPad, MacBook and browser, plus tweet and Instagram cards, all from a single studio.

Backdrops and tilt

Float the device on a gradient, a solid colour or a transparent canvas, with adjustable padding, shadow and rotation.

Framed locally, never uploaded

The screenshot is composited in your browser, so product screens and private captures never touch a server.

Where this helps

Launch

App store screenshots

Drop each app screen into a phone and put it on a branded backdrop for a store listing.

Web

Landing page heroes

Frame a web page in a browser or MacBook to show the product in context above the fold.

Work

Pitch decks

Turn flat captures into device shots so a deck reads as a finished product, not a draft.

Share

Social posts

Export a square or vertical card to show off a new screen on social without a design tool.

Tips that help

  • 1

    Match frame to capture

    Mobile screens go in a phone, desktop pages in a browser or laptop. A mismatched frame reads as wrong instantly.

  • 2

    Contrast the backdrop

    Keep the backdrop a few shades from the screenshot so the device stands out instead of blending in.

  • 3

    Tilt gently

    A few degrees of rotation adds life; a heavy tilt just makes the content harder to read.

  • 4

    Transparent for compositing

    Export a transparent PNG when you want only the device to carry onto your own layout.

Device mockups: why a frame makes a screenshot land

A raw screenshot says 'here is a thing'. The same screenshot inside a phone or a browser says 'here is a product'. A frame gives the viewer a sense of scale, signals what kind of app or page they are looking at, and lifts a flat capture off the page. This guide covers when each frame fits and how to set the backdrop so the result reads as polished rather than busy.

Pick the frame that matches the capture

Match the frame to where the screenshot was taken. A mobile app screen belongs in a phone, iPhone or Android frame; a desktop web page belongs in a browser window or a MacBook; a tablet layout belongs in an iPad. Putting a wide desktop capture in a tall phone is the quickest way to make a mockup look wrong.

Device mockup generator

If you are not sure, the plain mode is a safe default: it rounds the corners and floats the capture on a backdrop with a soft shadow, which already looks far more finished than a bare screenshot without committing to a device.

For social proof, the tweet and Instagram cards turn a screenshot into a believable post, which is handy for mocking up an announcement or a testimonial before it exists.

Set a backdrop that supports, not competes

A gradient backdrop is the workhorse. Keep it a few shades away from the colours in your screenshot so the device stands out against it, and reach for a darker backdrop when the app screen is light and a lighter one when the screen is dark.

Padding controls how much the device breathes. A little space around it reads as premium; cramming the frame to the edges feels cheap. The shadow does the rest, seating the device on the backdrop so it does not look pasted on.

Read more

A gentle tilt adds energy for a hero image or a store screenshot, but keep it small. A few degrees suggests motion; a heavy rotation just makes the content hard to read.

Export for where it will live

For a website or a deck, a gradient or solid backdrop gives you a finished card you can drop in as-is. Use the canvas aspect control to match the slot, such as a square for a social tile or a wide ratio for a header.

For compositing over your own design, export with a transparent backdrop so only the device carries through, then place it on top of whatever layout you already have.

PNG keeps edges and text crisp and supports the transparent backdrop; JPG is smaller and fine for a solid or gradient card where transparency is not needed.

Frequently asked questions

Honest answers to what people ask before using this tool.

Further reading

Independent references if you want to go deeper on the formats and tradeoffs.

Related tools