The 3D phone mockup is useful for product-page hero images, app previews, and social posts. It places a phone model, your screenshot, and the body color in one scene. You can drag to rotate the view, then export a PNG with a transparent background.
When to use it
- Show how an app or website looks on a real phone.
- Make a product update or feature announcement feel more dimensional than a flat screenshot.
- Compare body colors and angles quickly without opening a design app.
Prepare your assets
- Use a screenshot in the phone's original aspect ratio so text does not stretch.
- Keep the important title and buttons away from the edges.
- If you are making a set of images, use the same screenshot size and background for consistency.
Step by step
- Open 3D Phone Mockup and choose a model on the left.
- Choose a body color. Available colors vary by model.
- For a foldable model, adjust the fold angle or pick a preset under Fold.
- Under Screen, upload your screenshot, choose fill or fit, and adjust its position.
- Under View, pick a standard angle, or drag in the preview to find a better one.
- If you need a transparent background, enable Export transparent PNG, then export the current view.
Details that make it look natural
- Set the view before fine-tuning the screenshot. Changing the angle changes the screen perspective. Pick the approximate angle first, then adjust scale and position.
- Do not over-rotate. A slight tilt keeps the screen readable and works better in articles and product pages.
- Leave some breathing room. If the exported image feels crowded, add margin in your layout instead of enlarging the phone further.
- Keep one angle for color comparisons. A set of images with the same view makes the color the only difference.
Frequently asked questions
The model does not load. What should I do?
Check your connection and refresh the page. The 3D model may not work on some devices or older browsers; the latest version of Chrome is recommended. If it still does not load, use Device Mockup for a flat presentation image.
My screenshot is cropped. How do I fix it?
When the screenshot and screen have different aspect ratios, fill mode crops part of the image. Switch to fit, or adjust scale and position, then check the preview before exporting.
Is the exported image transparent?
With Export transparent PNG enabled, the PNG keeps a transparent background. Check the edges on both light and dark layouts before publishing.
Are my images uploaded?
No. The model and screenshot are processed in your browser; the page does not upload your screenshot to a server.
Related tools
If you only need a flat device frame, try Device Mockup. To combine several finished images, use Photo Collage.