Device frame mockup generator

How to use it

• Upload a screenshot: click the box, drag a file onto it, or paste one with Ctrl/⌘ + V.
• Choose a device. If your screenshot matches a phone’s exact size (for example 1320 × 2868 for the iPhone 17 Pro Max), it’s picked for you.
• Pick a frame colour and a background, or choose transparent to place the phone on your own design.
• Click Download PNG. The image keeps your screenshot’s full resolution.

Taking screenshots from Flutter

• iOS Simulator: press ⌘ + S, or run xcrun simctl io booted screenshot shot.png.
• Android emulator: click the camera icon in the toolbar, or run adb exec-out screencap -p > shot.png.
• Any device: run flutter screenshot while your app is running.

FAQ

What if my screenshot is a different size? It’s scaled to fill the screen and centred, so a little may be cropped at the edges. For a perfect fit, take the screenshot on the same device in the simulator.

Can I use the mockups commercially? Yes. The frames are drawn by this tool, so you can use the images in app stores, websites and client work.

Is my screenshot uploaded? No. Everything happens in your browser and nothing is sent to a server.

Need app screens to show off? Browse my Flutter UI projects with full source code.