Monitor mockup generator
A desktop monitor gives a wide design the room it needs. The screen is a 16 by 9 shape with a thin frame, a slim neck and a flat foot, which makes a dashboard, an editor or a landing page look like real work on a desk. 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-monitor-2800x1750.png · 2800 × 1750 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 monitor mockup
How do I make a monitor mockup?
Drop, paste or browse for a screenshot, or try the example. The monitor frame is drawn around it at once. Then open Size and choose Behance project image, large (2800 × 1750 px), and change the background, padding and shadow as you like. Use a wide screenshot at a 16 by 9 shape, ideally 1920 by 1080 or more, so small text stays readable once the frame is scaled down.
Why does my 16 by 10 screenshot show bars on the monitor?
The monitor screen is 16 by 9, slightly wider than 16 by 10, so a picture of the other shape is fitted inside it and thin bars appear above and below. Capture at 16 by 9 to fill the screen completely.
Which image size should I use for a monitor mockup?
A large 16:10 project size leaves enough pixels for the stand and the screen to stay sharp, which matters when a visitor opens the image in full view. In the Size list choose Behance project image, large, which is 2800 × 1750 px.
Is anything uploaded when I make a monitor mockup?
No. Your screenshot is read and drawn into the monitor frame by your own browser, so the picture behind your monitor 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.