Images & Design · Browser tool
Put a screenshot into a phone, laptop or browser frame
Drop a screenshot, pick one of four frames, set the background and download a PNG. The picture is drawn on your own device and is never uploaded.
- Phone, tablet, laptop and browser window frames
- Gradient, solid or transparent background, with padding, rounded corners and a drop shadow
- PNG at 1× or 2×, up to 4000 px on the longer edge
Before Desktop screenshot, 1280 × 800 px
After Browser frame, gradient background, PNG 1344 × 940 px
Before Phone screenshot, 780 × 1688 px
After Phone frame, transparent background, PNG 604 × 1106 px
Both use the default 72 px padding and drop shadow and were saved with the 1× button. The 2× button gives 2688 × 1880 and 1208 × 2212 px.
Four frames, and the screenshot shape that fills each one
Each frame has a fixed screen area. A screenshot with the same shape fills it edge to edge. Any other shape is either cropped to fill the screen or fitted whole with bars in a colour you pick.
| Frame | Screen area | Fills it without bars | PNG at 1× |
|---|---|---|---|
| Phone | 430 × 932 px | A tall phone capture such as 390 × 844, or the same shape at 2× or 3× | 604 × 1106 px |
| Tablet | 780 × 1040 px | 3:4, such as 768 × 1024 | 976 × 1236 px |
| Laptop | 1120 × 700 px | 16:10, such as 1280 × 800 or 1440 × 900 | 1473 × 927 px |
| Browser window | 1200 × 750 px below the address bar | 16:10, such as 1280 × 800 or 1440 × 900 | 1344 × 940 px |
PNG sizes are with the default 72 px padding. Padding runs from 0 to 440 px, so the file grows or shrinks with it. At 2× every size doubles, unless the longer edge would pass 4000 px; then the tool lowers the scale and tells you the size you actually get.
From screenshot to mockup
- 1
Drop your screenshot
Drop a PNG, JPG, WebP or GIF above, or choose it from your files. The tool opens with the picture already loaded. HEIC photos from an iPhone need to be saved as PNG or JPEG first.
- 2
Pick the frame and the finish
Choose phone, tablet, laptop or browser window. For the browser frame, type the address it should show. Then set the background, the padding around the device, the corner rounding of the whole image and the strength of the shadow. The preview updates as you go.
- 3
Download the PNG
Save at 1× or 2×. The file is named after your screenshot plus the frame, for example
home-phone.png. The frame, background and other settings stay as they are when you pick the next screenshot, so a set of images gets the same look.
Getting a sharp, clean result
Capture at the frame’s shape
Filling the screen keeps the picture full bleed and cuts away whatever does not fit, which suits a tall mobile capture in the phone frame and ruins a wide one. Fitting the whole picture keeps every pixel and adds bars. The cleanest option is to take the screenshot at the right shape to begin with: resize the browser window to a phone size, or use the device toolbar in your browser’s developer tools.
Resolution comes from your screenshot
The frames are drawn as shapes, so they stay crisp at 2×. Your screenshot cannot gain detail it never had. If the browser frame’s screen is 1200 px wide and your capture is 600 px wide, the result looks soft, and 2× makes that more visible. Capture on a high-density display when the mockup has to hold up at full size. Very large captures are scaled down to 4096 px wide when they are loaded.
Transparent or finished tile
A transparent background gives you a cut-out device with its shadow, ready to place over a slide or a page of any colour. A gradient or solid background gives you a finished image. The export is always PNG in sRGB colour, and it keeps none of the original file’s metadata. Colours from a wide-gamut Display P3 screenshot can shift slightly.
Questions before you run it
Which device frames are available?
Four: a phone, a tablet, a laptop and a browser window. They are drawn shapes rather than photos of a particular model. The phone has a pill-shaped camera cutout, the tablet and laptop a camera dot, the laptop a base, and the browser window three window buttons and an address bar that shows the text you type.
What if my screenshot has a different shape than the screen?
You choose. Fill the screen and crop the overflow, or fit the whole picture and fill the rest with a letterbox colour you pick. A screenshot with the same shape as the frame fills it with no crop at all, for example 1280 × 800 in the laptop or browser frame, or 768 × 1024 in the tablet frame.
Can I get a transparent background?
Yes. Choose Transparent and the PNG contains only the device and its drop shadow, ready to place over a slide or a page of any colour. Gradient (two colours and an angle) and solid colour backgrounds are also available.
How large is the exported PNG?
It depends on the frame and the padding. With the default 72 px padding the browser frame gives 1344 × 940 px at 1× and 2688 × 1880 px at 2×; the phone frame gives 604 × 1106 px at 1×. Exports are capped at 4000 px on the longer edge, and the tool tells you when it had to lower the scale.
Is my screenshot uploaded?
No. The picture is decoded by your browser and drawn on a canvas in the open tab. It is not sent to a server, and closing the tab clears it. The tool is free, with no account and no job limit.
Can I frame several screenshots in one go?
The tool frames one screenshot at a time. The frame, background and other settings stay as they are when you pick the next file, so a set of screenshots for a store listing or a slide deck gets the same look.