Free tool
Screenshot Mockup Generator for Browser, Phone and Laptop Frames
Turn a flat screenshot into a picture you can put in a case study, a post or a slide. Choose a frame, a background and a shape, then save it at the screenshot's own size or larger.
Frame
Background
Shape
Your screenshot is drawn in your browser and is never uploaded. Only your frame, colour, padding and shape settings are kept on your own device, never the screenshot.
Why a plain screenshot often looks unfinished
A screenshot of a web page dropped straight into a post has no edge. It blends into the page around it, and the reader cannot tell where the product ends. A frame, a soft shadow and a calm background give the picture a border and a sense of depth, which is why designers add them to project pages, launch posts and decks.
Drop a screenshot onto the page, click to choose one, or press Command or Ctrl and V right after you take it. PNG, JPG, WebP and HEIC files are accepted. The preview updates as you change each setting, so you can try three looks in a minute.
Every control and what it changes
| Control | Choices | Effect |
|---|---|---|
| Frame | Window, Browser, Phone, Tablet, Laptop, None | Draws a simple device or window shape around the screenshot |
| Light or Dark | Two themes | Colours the frame bar and edges to suit a light or dark screenshot |
| Address in the bar | Free text | Writes your own address into a browser frame |
| Background | Colour, gradients, Your picture | Sets what sits behind the frame |
| Padding, Corners, Shadow | Sliders | Space around the frame, how round the corners are and how strong the shadow is |
| Tilt | Slider | Turns the whole frame by a small angle |
| Shape | Fit, 16:9, 1:1, 4:5, 9:16, 3:2 | Sets the final canvas shape, or lets it fit the content |
The frames are drawn from plain shapes. They are not copies of any real product, so there are no brand marks to worry about.
Saving the picture at the right size
The Size menu offers the screenshot's own size, double or half. The save is drawn again at that scale rather than stretched from the preview, so edges stay sharp. Very large results are held to a limit of 6000 pixels on the longest side, so a huge screenshot at double size is trimmed down to that.
- PNG keeps everything, including a see-through background when the background is set to none.
- JPG gives a smaller file. If the background is see-through, the tool saves a PNG instead, because a JPG cannot hold transparency.
- Copy picture puts a PNG on your clipboard so you can paste it straight into a chat or a document. Some browsers block this, and the button then says so.
Choose a shape that matches where the picture goes. 4:5 suits a feed post, 9:16 a story, 16:9 a slide or a video thumbnail, and 1:1 a square tile.
Habits that make mockups look professional
- Take the screenshot at a normal desktop width, and crop out browser chrome before you drop it in, since the tool adds its own.
- Keep the background quieter than the screenshot. A strong gradient with a busy page fights for attention.
- Use a small tilt or none. A big angle makes text hard to read.
- Match the light or dark frame to the page, so the bar does not clash.
- Do not enlarge a small screenshot to fill a big canvas. Pick a smaller shape or add padding instead.
If you are showing a site you built, the picture is only as good as the site. Our hero section design guide covers the part of the page most screenshots capture first.
Where the tool stops
This is a framing tool, not a full design editor. It handles one screenshot at a time, and the frames are simple shapes rather than detailed device renders. It does not add text, arrows or highlights. For those, finish the picture in a design program after saving it. Your last frame, colour and spacing choices are remembered on this device for the next visit, but a background picture is not, and the setting returns to a gradient.
Frequently asked questions
Which file types can I use?
PNG, JPG, WebP and HEIC screenshots are accepted. You can drop a file, choose one, or paste straight from the clipboard.
Can I make the background see-through?
Yes. Set the background to none and save as PNG. A JPG cannot hold transparency, so the tool saves a PNG in that case.
Can I use my own photo as the background?
Yes, choose Your picture under Background. It is used for this session only and is not remembered next time.
Why is my saved picture smaller than I expected?
The longest side of a saved mockup is held to 6000 pixels. A very large screenshot saved at double size is reduced to fit that limit.
Does it put the screenshot inside a real iPhone or MacBook image?
No. The phone, tablet and laptop frames are simple drawn shapes made for this tool, not photos or official artwork of any device.
Does the screenshot leave my computer?
No. It is drawn in your browser and nothing is sent to a server.
More free tools
- image resizer: Resize pictures by pixels or percent with fit, crop or stretch, presets and file type choices.
- Combine images: Join pictures side by side, stacked or in a grid, with labels, gaps and a background.
- image compressor: Compress pictures to a quality level or a target size in KB, with a before and after view.
- Code to image: Turn pasted code into a syntax coloured picture in a window frame on a gradient.
- Image cropper: Crop pictures to a free box, a ratio, a social size or a circle, with rotate and straighten.