Device Mockup
Places a screenshot inside a phone, tablet, laptop or browser frame with a background and shadow.
Puts a screenshot inside a phone, tablet, laptop or browser frame and exports a PNG at up to three times size. The frames are drawn on a canvas out of rounded rectangles rather than being photographs of any product, so nothing here is a trademark and the output stays sharp at any scale. The screenshot never leaves the tab.
Drop a screenshot
PNG, JPEG or WebP. Everything happens in this tab.
Preview
The frames are shapes, not photographs
Phone, tablet, laptop and browser window are all drawn on the canvas out of a few rounded rectangles. They are not photographs of any product and carry no trademark, so they can be used anywhere, and they stay sharp at any export scale. The screen ratios are the ones current devices use — 19.5:9 for a phone, 4:3 for a tablet, 16:10 for a laptop — so when a screenshot has a different ratio, "fill" crops the middle and "show all" leaves margins. A long page capture usually wants "align to top".
Shrink the exported PNG with PNG compression, and build a share card in the OG image maker.
How to use it
Drop the screenshot
PNG, JPEG or WebP. The stats row underneath shows the image ratio against the frame’s screen ratio, which is the number that decides how the next choice goes.
Choose the frame, then how the image fits it
Cover crops the middle to fill the screen, contain shows the whole image with letterboxing, and top-align is the one for a long page capture — it keeps the top of the page and lets the rest run off the bottom, which is what a screenshot of a scrolling page is usually trying to show.
Set the padding and the background
Padding is what makes the shot look composed rather than cropped. Transparent background is the one to choose when the image is going onto a coloured slide or a page whose background you do not control.
Export at 2× unless you know otherwise
The line under the preview gives the exact output size for the scale you picked. 2× is right for a retina screen or a README; 3× is for print or a large slide, and the file gets big.
Common questions
Is this an iPhone? A MacBook?
No. They are generic shapes at the aspect ratios modern devices use — 19.5:9 for a phone, 4:3 for a tablet, 16:10 for a laptop. There is no logo, no product photograph, and no trademarked outline, which is deliberate: a mockup with a real device in it usually cannot be used in marketing without permission.
My screenshot is cropped in a way I did not want.
The stats row shows your ratio and the frame’s. When they differ, cover has to crop something. Switch to contain to see the whole image with letterboxing, or to top-align if the important part is at the top, or take the screenshot again at the frame’s ratio.
Can I put several screens side by side?
Not here — one image, one frame. Composing a scene of three devices is layout work, and doing it badly is worse than not doing it. Export each one on a transparent background and arrange them in whatever you are already using for the slide.
Is my screenshot uploaded?
No. It is decoded into an ImageBitmap and drawn to a canvas in this tab, and the PNG is produced by the canvas itself. Nothing goes over the network, which is the point for a screenshot of an unreleased product.
Feed it from
Placeholder Image
Generates a solid or gradient placeholder at any size with the dimensions drawn on it.
Screenshot Annotator
Draws arrows, boxes, numbered steps and blur patches on a screenshot and exports a flat image.
Border & Padding
Adds a solid, gradient or rounded border and padding around an image, or pads it to a target ratio.
Code Screenshot
Renders a code snippet as an image with syntax highlighting, a window frame and a chosen theme.
Next
These accept what this tool produces, so the result can go straight in.
Border & Padding
Adds a solid, gradient or rounded border and padding around an image, or pads it to a target ratio.
Social Card Generator
Composes a 1200×630 share image from a title, subtitle, brand line and optional logo on a chosen template, and writes the meta tags to go with it.
PNG Compressor
Quantises the palette and rewrites the deflate stream to shrink a PNG without changing its dimensions.
Screenshot Annotator
Draws arrows, boxes, numbered steps and blur patches on a screenshot and exports a flat image.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Aspect Ratio Calculator
Works out the missing dimension for a target ratio and lists the standard sizes it matches.