Device Mockup Generator (Screenshot in a Phone or Laptop Frame)
Drop an app or website screenshot into a generic phone, tablet, laptop or browser-window frame and get a presentation-ready mockup. Change the device color, shadow, padding and transparent background, then save it as a PNG. The frames are original generic designs, not copies of any brand’s products. Everything runs in your browser, so your screenshot is never uploaded. If you only want a decorative border, try Image Frame Maker.
🔒 Runs in your browser · Your data is never sent to a server
Drag and drop an image here, or pick one with the button.
Available for the phone and tablet only.
Preview
How to use
- Drag and drop a screenshot into the box, or pick one with the button.
- Choose a phone, tablet, laptop or browser window under "Device".
- Adjust "Image fit", "Device color", "Transparent background" and the other options while checking the preview.
- Click "Download mockup as PNG" to save it.
Notes
- The frames are original generic designs, not replicas of any manufacturer’s products. Notches and camera positions are simplified.
- "Fill the screen (crop)" crops the center of your image to the screen’s aspect ratio. Choose "Fit inside (black bars)" to keep the whole image.
- Tick "Transparent background" to get a PNG with a transparent backdrop, ready to drop onto slides or documents.
- The output size is set by "Output width (px)". For GIF and animated WebP, only the first frame is used. Images up to 16384 px per side and 50 million pixels in total can be loaded.
Glossary
Mockup
A sample image that shows how a finished product will look, such as an app screen inside a device frame for a store page or a slide deck.
Bezel
The border around a screen. Here it is drawn in the device color, and its width is fixed for each device.
Notch / Dynamic Island
The cutout or pill-shaped area at the top of a phone screen that holds the camera. This tool draws a simplified black rounded shape instead.
FAQ
How do I put a screenshot into a phone frame?
Load the image and pick "Phone" under "Device". The image is center-cropped to the screen’s aspect ratio and placed into the frame. Click the PNG download button to save it.
The edges of my screenshot are cut off. How do I show all of it?
Change "Image fit" to "Fit inside (black bars)". The whole image is placed on the screen without cropping, and black bars appear on the top and bottom or the sides when the aspect ratios differ.
Can I get a transparent background for slides?
Tick "Transparent background" and the area outside the frame is saved as transparent PNG. If you add a shadow, only the shadow stays semi-transparent.
Can I use a frame that looks exactly like a specific brand’s phone?
No. The frames are original generic shapes, and the notch and camera are simplified. The tool deliberately avoids reproducing any real product’s look out of respect for trademarks.
Is my screenshot uploaded to a server?
No. Compositing and PNG export all happen in your browser, and the image is never sent anywhere.
Share this page