A bare screenshot dropped into a slide, a launch post or a help page often looks flat and unfinished. Put the same picture in a window frame on a soft gradient, with some space and a shadow around it, and it looks deliberate. That is what a screenshot mockup does, and this page makes one in a few clicks.
Pick a frame and a background, set the padding, the corners and the shadow, and choose a canvas size. It all runs in your browser, so the screenshot is never uploaded, which matters when it shows work that is not public yet. It is free, with no account and no watermark.
How to make a screenshot mockup
- Press Select image and choose your screenshot, or drop it on the page. PNG, JPG, WebP and the other common picture formats open.
- Pick a Frame, such as Browser window.
- Pick a Background: a gradient, a plain colour or Transparent.
- Set the Padding, the Corner radius and the Shadow.
- Choose a Canvas, then a format under Save as, and press Make mockup.
- Save the picture. Its name ends in _mockup, so app.png gives app_mockup.png.
The stage shows the finished mockup and is drawn again each time you change a setting. Press and hold Hold to compare to see the bare screenshot where it will sit, on the background you chose. The panel shows the size of the result and an estimate of the file size.
Window frames and backgrounds
The frames are drawn plainly, with no text, no logo and no brand, so they suit any product. A title bar is added above the screenshot, with three round dots on the left.
| Frame | What it looks like | Good for |
|---|---|---|
| Browser window | A light title bar with red, yellow and green dots and an empty address bar | Websites and web apps, the starting choice |
| Dark browser window | A dark title bar with grey dots and a dark address bar | Dark mode screens and dark slides |
| App window | A light title bar with the three dots and no address bar | Desktop apps and tools |
| None | No title bar, only the screenshot | Phone screens or pictures that need no window |
The Background starts on Ocean, a blue gradient. Four more gradients sit beside it: Sunset, Mint, Ink and Paper. After them come White, Black and Transparent, and the last swatch lets you choose any colour. A screenshot with background in your brand colour ties it to the rest of your page.
Transparent leaves the space around the window see-through, so you can lay the mockup on a page or slide of any colour later. It is saved as PNG or WebP, so JPG is switched off under Save as while it is picked and shows No transparency.
Padding, corner radius and shadow
- Padding is the space between the window and the edge of the picture, from 0 to 20 %. It starts at 8 %. At 0 the window touches the edges.
- Corner radius rounds the window's corners, from 0 to 5 % of its width in steps of 0.5. It starts at 1.5 %, a gentle curve. At 0 the corners are square.
- Shadow sets how strong and soft the shadow under the window is, from None to Strong. It starts in the middle, at 50.
For a clean product shot, keep the starting values. For a busy slide, more padding and a softer shadow give the screenshot room. For a mockup that will sit on a plain page, try Transparent with a small shadow, so the window seems to float above the page.
Rounded corners and a shadow also work without any frame: pick None, and you get a screenshot with background, rounded corners and depth, but no title bar. To add a flat coloured edge instead, Add border to image is the simpler tool, and Round image corners rounds a picture with nothing else around it.
Canvas sizes for slides, posts and link previews
Canvas decides the size of the finished picture. Fit the screenshot follows your screenshot; the others are fixed sizes.
| Canvas | Size of the result | Good for |
|---|---|---|
| Fit the screenshot | The screenshot at its own size, plus the title bar and the padding | Help pages, documents, blog posts |
| 16:9 | 1920 × 1080 | Slides and wide banners |
| Square | 1080 × 1080 | Square social posts |
| Link preview | 1200 × 630 | The picture shown when a link is shared |
With Fit the screenshot, your screenshot keeps its own size, pixel for pixel, and the picture grows around it. With a fixed canvas, the window is scaled to fit inside the canvas, inside the padding, and centred. A small screenshot is enlarged to fill a large canvas and can look soft, so for a sharp browser mockup at 1920 × 1080, take the screenshot at a large size to begin with.
Pick the fixed canvas that matches the place the picture is going, such as a 16:9 slide or a square post. If you need another exact size, make the mockup with Fit the screenshot and then use Resize image, with Fit and a matching background, to bring it to the size you want without cutting the window off.
File format, size and privacy
Save as starts on PNG, which keeps every pixel of text and lines sharp. A gradient background makes a PNG much larger than a plain colour does, so if the file is big, pick JPG or WebP: both are saved at high quality and make a far smaller file. The picture is drawn fresh, so it carries no location, camera or date details.
- The mockup is made inside your browser. Your screenshot is never uploaded, and our server does no picture work.
- It is free, with no account and no watermark. Image tools are not counted in the free daily limit, which applies to document conversions only.
- It works in current Chrome, Edge and Firefox. Very large screenshots may be too big for your browser.
To make a large PNG smaller after saving, Compress image can help. How files are handled is on the privacy page.
Make your screenshot mockup now
To make a screenshot mockup, pick a Frame and a Background, set the Padding, Corner radius and Shadow, choose a Canvas and press Make mockup. Hold to compare shows the bare screenshot at any time.
It is free, private and runs in your browser. Select a screenshot above to start.
