image · Browser tool

Screenshot Device Mockup

Put a screenshot inside a phone, tablet, laptop or browser frame, set the background and the padding, and save a PNG. The frames are drawn with canvas paths, so there is no artwork to download and nothing to upload.

Runs in your browserNothing is uploadedHow it works

Free toolNo account · no export limitFree, unlimitedRuns offline once the page has loaded.

Screenshot

Choose a picture

FrameAddress shown in the browser frame

When the shapes do not matchFill the screen and crop the overflowFit the whole picture and letterbox the rest

Letterbox colour

Background and finish

BackgroundGradientSolid colourTransparent

First colourSecond colour

Gradient angle 135°Padding around the device 72 pxCorner rounding of the image 24 pxDrop shadow 34

A transparent background keeps the shadow, so the PNG drops cleanly onto a slide or a page of any colour.

Preview

Exports are capped at 4000 pixels on the longer edge. If a 2× export would cross that, the scale is reduced and the line above says what you actually got. The cap exists because browsers differ in the canvas area they will allocate, and an oversized canvas comes back blank instead of failing loudly.

How the frames are made

There is no image library behind this page and no frame artwork to fetch. Each device is a short list of canvas path calls: a rounded rectangle for the body, a second one for the screen, a clipping region so the screenshot cannot spill past the bezel, and a few small shapes for the notch, the camera or the traffic lights. Because it is geometry rather than a bitmap, a 2× export is genuinely twice the detail in the frame itself instead of an upscale.

The screenshot is the part that cannot be invented

Your picture is drawn into the screen area at whatever resolution you supplied. If the screen area of the frame is 1200 pixels wide at 1× and your screenshot is 600 pixels wide, the result will be soft, and exporting at 2× makes it softer rather than sharper. Take the screenshot on a high density display, or capture at a device pixel ratio above one, if the output has to stand up at full size. The frames themselves stay crisp either way.

Cropping versus letterboxing

A phone frame is roughly 19.5 units tall for every 9 across. A desktop screenshot is nothing like that shape, so something has to give. Filling the screen keeps the picture at full bleed and cuts the sides away, which suits a tall mobile capture and ruins a wide one. Fitting the whole picture keeps every pixel and pads the remainder with the letterbox colour, which is honest but leaves bars. Matching the capture to the frame beforehand beats both: resize the browser window to a phone viewport before you take the shot, or use the device toolbar in the developer tools.

Colour, transparency and where the PNG ends up

The export is always PNG, which keeps the alpha channel intact. With a transparent background you get a cut-out device with its shadow, ready to sit over any colour. With a gradient or a solid fill you get a finished tile. Corner rounding applies to the whole exported image rather than the device, which is what you want when the picture is going into a card or a rounded container.

One limit worth stating: canvas output is sRGB. A screenshot taken on a wide-gamut display and tagged with a Display P3 profile will be reinterpreted, and saturated colours can shift slightly. Nothing else about the source file survives either, since a canvas holds pixels and no metadata. That suits a mockup, and it also means the export carries no trace of where the original came from.

Nothing leaves the tab

The file you pick is decoded with the browser's own image decoder and drawn straight onto a canvas. It is never read into a form, never sent anywhere, and the object URL used to decode it is released as soon as the bitmap exists. Close the tab and the picture is gone from memory. Large captures are scaled down to 4096 pixels wide during decoding, which keeps a 100 megapixel screenshot from stalling the page.