iPhone and MacBook mockup together

Desktop and mobile in one shot — the classic “responsive” hero image.

Drop your screenshot here

Size

Format

Your image stays in your browser — nothing is uploaded.

Choose “Both” and the generator renders the desktop version of the screen on a MacBook and the mobile version on an iPhone standing in front of it — or lying on the desk next to it in the top view.

It’s the fastest way to show that your product works everywhere.

Examples

Analytics Dashboard mockup on MacBook Pro 14-inch and iPhone 17 Pro, left angleAnalytics Dashboard on MacBook Pro 14-inch and iPhone 17 Pro Mockup — Left AngleLanding Page mockup on MacBook Pro 14-inch and iPhone 17 ProLanding Page on MacBook Pro 14-inch and iPhone 17 Pro MockupE-commerce Store mockup on MacBook Pro 14-inch and iPhone 17 Pro, isometricE-commerce Store on MacBook Pro 14-inch and iPhone 17 Pro Mockup — IsometricFinance App mockup on MacBook Pro 14-inch and iPhone 17 Pro, right angle, dark modeFinance App on MacBook Pro 14-inch and iPhone 17 Pro Mockup — Right Angle, Dark Mode

How it works

  1. Choose a screen

    Pick one of 18 interface types (5 layouts each) or upload your own screenshot. Press “New variant” until you like it.

  2. Choose a device

    Put it on an iPhone 17 Pro, iPhone Air, MacBook Pro or MacBook Air — or show it in a browser window.

  3. Download

    Pick an angle and background, then download a high-resolution PNG, JPG or WebP. Transparent background works too.

Questions

Do both screens match?

Yes, both use the same template, colors and product name — desktop on MacBook, mobile on iPhone.

Can I choose the models?

Yes, pick the MacBook and iPhone model and color separately.

Can I use my screenshots?

An uploaded screenshot is placed on both screens.

Is UI Generator free?

Yes. Every interface, device, angle and export size is free, and you don’t need an account. You can use the images in commercial projects.

Can I put my own screenshot on an iPhone or MacBook?

Yes. Click “Your screenshot”, drag an image onto the preview or paste it with Ctrl/Cmd+V. Your image is processed in your browser and is never uploaded.

More mockups