This page is set up for app screenshots on a phone: upload a screenshot and you get a 3D phone in the tilted "hero" pose on a light studio background, with a soft shadow and a faint reflection on the glass, ready for a landing page or an app store listing.
How to make a phone mockup
- Take the screenshot on the phone itself, or export the screen from your design tool at full size. A screenshot with the usual tall phone shape fills the display exactly.
- Upload it. PNG keeps small text sharpest; JPEG and WebP work too.
- Pick the angle (tilted hero, front, three-quarter left or right, or flat from above) and the colour of the phone.
- Choose a background. Transparent gives a PNG you can place on any colour, with the shadow kept as a soft semi-transparent layer.
- Download the picture, or switch Output to Animation for a looping video of the phone floating, swinging or spinning to show its back.
Landscape screenshots and videos
Wide content, such as a game or a video, turns the phone sideways automatically. Set Orientation to Portrait or Landscape to force one. A screen recording makes an animation and plays on its screen; choose Picture for a frame from its start.
Common pitfalls
- There are bands above and below the screenshot. A screenshot that is shorter or wider than the phone's screen is shown whole, with the rest of the screen in the average colour of its edges. Choose Fill the screen to crop it to fill the display instead; tall ones keep their top.
- The status bar looks cramped next to the camera. The phone has a small punch-hole camera at the top of the display, as many current phones do. Screenshots taken on a phone already leave room for it.
- Colours shift slightly across the screen. That is the studio reflection on the glass: a little lighter where it catches the light, a little darker elsewhere. Set Reflection on the screen glass to Subtle or None under More options.
More about what this tool reads and writes: 3D Device Mockup Generator.