Website mockup generator
A finished web design deserves a picture that looks finished too. Put the home page inside a browser frame, choose a background that suits the brand, and export an image sized for a project page. Nothing is uploaded: the picture is drawn in your browser.
Studio
Your screenshot appears here
Drop, paste or browse for a screenshot, or try an example.
Drop a screenshot here
Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.
Export
Saves as mockup-browser-1400x875.png · 1400 × 875 px · PNG · 1x
Copy image always copies a PNG at the chosen scale.
Add a screenshot to enable Download and Copy image.
More mockup ideas
How it works
Add a screenshot
Drop, paste or browse for a screenshot of your design (PNG, JPG, WebP, GIF, AVIF or BMP), or start with an example. Your own browser reads it and nothing is uploaded.
Choose a device and a background
Pick a phone, tablet, laptop, browser window or monitor, then set a solid, gradient, mesh or transparent background, the padding, the corner radius, the shadow, the bezel colour and, if you like, a second device.
Pick a size
Use a ready-made size for a marketplace preview, a Product Hunt gallery, Dribbble, Behance or a social post, or type your own width and height.
Download or copy
Save the mockup as a PNG or WebP at normal or double size, or copy it straight to your clipboard to paste into a chat or a document.
Questions about a website mockup
How do I make a website mockup?
Drop, paste or browse for a screenshot, or try the example. The browser window frame is drawn around it at once. Then open Size and choose Behance project image (1400 × 875 px), and change the background, padding and shadow as you like. Show the top of the page, the part a visitor sees first, and keep the background plain so the design colours do the talking.
Should I show the whole page or only the top?
Show the top. A tall full-page capture is fitted inside the 16 by 10 screen and the text becomes too small to read. Make one picture for the top and extra pictures for the sections you want to highlight.
Which image size should I use for a website mockup?
A project image is shown 1400 px wide, so only the width really matters. The 16:10 height here suits a browser window with a little breathing room. In the Size list choose Behance project image, which is 1400 × 875 px.
Is anything uploaded when I make a website mockup?
No. Your screenshot is read and drawn into the browser window frame by your own browser, so the picture behind your website mockup never reaches a server, and Download and Copy image work on your device.
More free tools
View all toolsAbout these tools
Small tools, made by Sifency
Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.