.svg)
1. Prepare the screenshot you want to show
Capture the screen of your app, website, or UI concept as a PNG, JPG, or WebP. Use an image with enough detail for the presentation size you need. A tall portrait screenshot is a natural starting point for the iPhone 18 Pro and Pro Max displays. The foldable iPhone Duo has a wide inner display and a separate portrait cover display, so prepare a different image for each if you want to show both. This is how to turn a screenshot into an iPhone mockup without baking a flat phone frame into the source image.
Keep the screenshot clean: remove browser chrome, crop out unrelated desktop space, and check that text remains readable at the size you plan to use. The editor accepts files up to 40 MB and 64 megapixels. Your source image stays in your browser tab.
2. Choose the right 3D device
Open the free iPhone mockup generator and select a device. Choose the iPhone 18 Pro for a focused portrait composition or the 18 Pro Max for a larger frame around a detailed screen. Use the iPhone Duo for a foldable concept with independent inner and cover images. Pick a finish that supports the colors of the design. You can change the model or finish later without starting the whole workflow again.
3. Upload and fit your design
In Add your design, upload the screenshot. Fill covers the device’s display. If part of the UI is cut off, move the Horizontal crop or Vertical crop controls until the important area is visible. Fit keeps the entire source image visible inside the screen and may leave unused space when its aspect ratio differs from the display. Neither choice should stretch your image. The Rotate design control corrects the screenshot’s orientation independently of the phone angle.
To make an iPhone app mockup, start with a representative screen such as a dashboard, checkout, or onboarding step. For an iPhone screen mockup of a long web page, decide whether the first fold or a key feature should lead the composition before adjusting the crop.
4. Compose the phone in three dimensions
Drag the mockup to rotate it. Choose Front when you want viewers to inspect UI details, or try three-quarter, low, high, and top presets when the hardware should become part of the image. Move changes the phone’s position on the canvas; zoom changes how large it appears. Rotate frame accepts a precise degree value for the final tilt. If you are working with the Duo, set the fold angle in the side panel or beside the canvas controls. You can return to Front with Reset view.
Studio lighting adds highlights to the frame. Turn on Move lighting and click or drag the sun icon to reposition the light, then adjust its intensity. If you prefer flatter colors, turn Studio lighting off. For a specific pose inspired by another image, use the optional reference-image angle guide.
5. Export a transparent PNG
Click Export PNG and choose 2K, 4K, or 8K for the longest edge. Available sizes depend on your browser’s graphics capabilities and free memory. The final file contains the rendered device and the design on a transparent background. You can place it over a website section, slide, poster, or social graphic without removing the background afterward. The export has no watermark. An 8K choice increases the rendered phone detail, but cannot recreate detail absent from a small source screenshot.
That is the full online workflow for making a 3D iPhone mockup for free: prepare a screenshot, choose a model, fit the screen, set the perspective and light, then download the transparent image. If you need the basics of a phone mockup for a client review, a front view and 2K export may be enough; for a large visual, use the highest supported size your device can handle.