Why does my image get cropped in the phone mockup?

The Phone and Tablet frames crop your image to fill the screen area, since real device screens have a fixed shape. Drag to choose which part of your image stays in frame rather than accepting wherever it lands by default.

Which frames are available?

Three: Browser Window, Phone and Tablet. The browser frame is a gray title bar with red, amber and green dots above your image, the phone has a dark rounded body with a notch, and the tablet is a dark rounded body with a plain bezel.

Why can I not drag the image in the Browser Window frame?

That frame is sized to your picture, with its height following the image's proportions, so nothing is cropped and there is nothing to reposition. Drag, zoom and Fit apply only to Phone and Tablet.

What does Fit whole image do?

Normally the picture is enlarged to cover the screen and the overflow is cropped. Fit whole image instead shrinks it until all of it is visible, filling any leftover space on the screen with white. Zoom still works on top of that.

What resolution is the downloaded PNG?

Fixed by the frame: the browser file is 1200 pixels wide, the phone 600 by 1220 and the tablet 900 by 1200. The browser height depends on your image plus 44 pixels for the title bar. Small source images will look soft.

It turns the source picture by 90 degrees each press, cycling through 0, 90, 180 and 270, then fits it into the chosen frame. The frame itself never rotates, and pressing it resets any drag and zoom position.

Home/Design & Color/Mockup Generator

Mockup Generator

Place designs in device frame mockups

Files never storedRuns on your device

Drop a screenshot or design to place in a device frameTap to choose a screenshot or design to place in a device frame

or click to browseor tap to choose

Processed entirely in your browser

Large files (over 50 MB) may take longer or run out of browser memory

About Mockup Generator

Places your design or image into a realistic device or product mockup (a browser window, a phone or a tablet frame), useful for presenting work without needing separate mockup software.

Watch: Mockup Generator in Action

Watch on YouTube · Subscribe for new tutorials

How to use Mockup Generator

Drop a screenshot or design to begin. Under Frame choose Browser Window, Phone or Tablet, and the preview redraws at once. Rotate steps the picture through 0, 90, 180 and 270 degrees before it is placed in any frame.

Phone and Tablet frames add controls. Drag the image inside the screen to choose which part shows, move the Zoom slider from 1.0x to 2.5x, press Fit whole image to show the entire picture on a white screen instead of filling it, or press Reset Position. Browser Window needs none of this because it shows the whole picture.

Download Mockup (PNG) saves a file named mockup-browser.png, mockup-phone.png or mockup-tablet.png.

When to use it

Use it when you need to show a landing page, app screen or poster design inside a device for a portfolio, pitch deck, store listing draft or social post, and you do not want to open a design suite. A quick browser-window mockup of a full-page screenshot is an especially easy win.

When not to use it

It has three simple generic frames, so it will not produce a branded phone model, a laptop on a desk, a hand holding a device, shadows or a scene background. For polished marketing renders, a dedicated mockup library or design app is the better route. It also cannot place an image on a printed object such as a mug or poster.

Tips for best results

For the Phone frame, a portrait screenshot close to a 1:2 shape fills the screen with little cropping, which is why zoom and drag matter less. Use Rotate on a landscape screenshot to make it fit upright. In the Browser frame the height follows your picture, so a very tall full-page capture produces a very tall image; crop it first.

Limitations

Browser Window is 1200 pixels wide with a 44 pixel gray bar holding three colored dots and no address bar or tabs. Phone is 600 by 1220 with a notch, and Tablet is 900 by 1200 with no notch or button. On Phone and Tablet the corners outside the rounded body are transparent, and only the PNG format is offered.

Privacy

Your image is opened as a local object inside the tab and painted onto a canvas together with the frame, which is drawn from shapes in code, so no template images are downloaded. Dragging, zooming and rotating happen in memory, and the PNG is generated in the browser when you press download. Neither your design nor the result is uploaded.