Website mockup generator

What the frame is actually doing

A screenshot proves the work exists. A frame makes it legible: it says whether you are looking at a website, a desktop app or a phone, and it gives the image an edge so it does not bleed into the page around it. That is why the same few places keep asking for one.

• Case studies and portfolios, where identical framing reads as a sequence, not a pile.
• Decks, seen from three metres away, where a bare screenshot has no silhouette.
• App store and marketplace listings, and the OG image a link preview pulls.
• Docs, where a phone frame says “this is the mobile view” faster than a caption.

Take a clean capture first

Nothing here can rescue a bad screenshot. Set the window to a deliberate width first — 1440px for a desktop shot, 390px in the browser’s device toolbar for the phone view — rather than whatever size it happened to be. Then check three things.

• Hide the bookmarks bar, the extension icons and any half-open devtools panel. A clean profile is worth two minutes.
• Put the page zoom back to 100%. It is the commonest reason a mockup looks subtly wrong.
• Capture real content. Lorem ipsum and empty states make a reader distrust the case study.

On a high-density display the capture is already twice the CSS size: a 1440px window comes out 2880px wide, and that detail survives the export. If you have a vector rather than a capture, rasterise it with the SVG to PNG converter first.

Why the 2x export is not vanity

An image sitting in a 600px slot on a retina screen is asked for 1200 real pixels. Give it 600 and the browser stretches every pixel over four, which is the soft, grey look that reads as amateur. Export at 2x and let the layout scale it down. Past 2x you are only paying for bytes.

The frames here are drawn as canvas shapes rather than stored as pictures, so the chrome, the bezels and the corner radius are redrawn at whatever size you export and never soften. Only your screenshot is limited by the pixels it arrived with.

Fit, crop, and the honest limit

The browser frame takes your screenshot’s own proportions, so nothing is cropped, tall or wide. The laptop and phone screens are fixed shapes, 16:10 and 19.5:9, so something has to give: fill the screen keeps the top of a long page and crops the rest, fit inside keeps every pixel and letterboxes the difference. Neither stretches the image.

Finally, a mockup should never be the only way a reader sees the work. Text inside an image is not selectable, not searchable and not read aloud by a screen reader, so write a real alt description and link the live page beside it. Angled and perspective renders hide the detail a client is trying to read, so keep one flat, straight shot in the page too.