Guide · 8 min read · free tool
Screenshot Mockups: A Browser Frame for a Picture You Already Took
Sep 2, 2026 · Zelpura Editorial · All guides
A raw screenshot is honest and ugly. A framed one is easier to read in a blog post, a launch note, or a tutorial. The frame is decoration. The pixels inside should still be the product. This page puts your screenshot in a simple browser or device frame, locally, so you are not uploading the admin panel of your app to a mockup site in order to get a shadow. Shadows are not worth a data leak. The admin panel might be.
The inputs are the job, not a formality. You upload a screenshot you took, and you pick a frame style. The URL bar, if the frame has one, should not be a lie you use to impersonate a domain. Put your real address or a neutral label. Background color is for the canvas around the frame, so the image can sit on a blog that is not pure white. None of these controls change the product pixels. If the screenshot is wrong, retake it. Do not 'fix' a bug in the mockup. A tutorial with a fixed mockup is a tutorial that will not match the reader's screen, and the reader will think they failed.
A settings panel, captured at a normal window size, framed, exported at a width that fits your blog column. Compress it after, if the blog complains about weight. Check that the frame did not crop a button the step needs. A pretty crop that hides the control you are naming is a bad tutorial. Also check for personal data in the shot: an email, a customer name, a token in a URL. Framing does not blur. If something should be hidden, blur it in an editor before you frame, or retake the shot with sample data. Sample data is a professional habit. Real customer data in a blog image is an incident.
The miss is uploading a screenshot full of real user data to a third-party mockup generator. The second miss is a frame so heavy that the product becomes a postage stamp. The third miss is inventing metrics in the image. If the dashboard does not show that revenue, do not composite it. Readers who sign up on the strength of a fake chart are not users you want, and the ones who notice will not trust the next true chart. Use the real empty state if the product is new. Empty states are more persuasive than a lie, because they are a thing a person can survive.
Retake the screenshot with sample data and a window size close to the final frame. Frame it here. Read every label at the export size. Compress if needed. Upload to your own site. Keep the unframed original so you can reframe later when the blog layout changes. A mockup is a presentation of a screenshot. The screenshot is the asset. Lose the asset and you will be recreating a button that has since moved. Save both.
This is a local framing tool, not a license to impersonate another product or to publish data you should not have captured. Do not put someone else's interface in a frame and imply it is yours. Do not include secrets, credentials, or personal data. A frame does not anonymize. If the shot contains a face or a name you do not have permission to publish, do not publish the frame. The tool will not stop you. The habit has to.
Name the file with the feature and the date: settings-export-2026-09.png. When the UI changes, you will know which mockups are stale. Stale mockups are how support pages teach the wrong click. A monthly look at the images in your top posts is enough. Replace the ones that lie by omission. The generator will still be here. The screenshot is the part you have to retake in the product, which is the part that keeps the writing honest.
Read the result back before you act. Read the URL bar and the first row of the screenshot as if you were a stranger. If either one leaks a customer or pretends to be a company you are not, fix it before you export a second time.
Device frames imply a responsiveness you may not have. A phone frame around a desktop-only page is a promise. If the page does not work on a phone, do not use the phone frame. Use a browser frame and a width you have tested. The mockup is marketing, even inside a tutorial. Market the product that exists. The other one is a roadmap, and roadmaps belong in sentences, not in fake chrome. If a step in the tutorial depends on a button, circle it in the screenshot before you frame, or name it in the caption so a reader is not hunting. A frame without a pointer is still a puzzle. Puzzles are not instructions. Add the pointer in the image, locally, before you upload anything.
Related: Favicon · Compressor · Palette · All 93 tools