Browser window mockups, without the laptop.
Sometimes the device is the wrong frame. A dashboard does not live on a phone, and wrapping it in a MacBook adds three hundred pixels of aluminium nobody asked to look at. This puts the screenshot in a window and stops there.
This one is 2D, and that is on purpose
The iPhone, MacBook and iPad in this tool are real WebGL renders of real 3D models. The browser window is not. It is drawn on a 2D canvas with a skew transform for the perspective and a hand-painted side wall for the depth.
That is a deliberate choice rather than a missing feature. A browser window is not a physical object. It has no thickness, no material and no way light is supposed to fall across it, so there is nothing for a 3D renderer to be accurate about. The honest version of a window frame is a flat one that has been tilted.
Two things follow from that, and both are worth knowing before you spend ten minutes on an angle. It holds up well at gentle tilts, which is where this frame is usually wanted. It gets less convincing as you push further, because a skew is not perspective and the side wall is painted rather than computed, so eventually the geometry stops agreeing with itself. If you want a hard angle, use the MacBook.
The screenshot size that fits
The window is 840 by 540 units, but 44 of those are the title bar. Your screenshot gets the remaining 840 by 496, so the aspect you are actually filling is 1.69 : 1. That is slightly squarer than 16:9 and noticeably wider than the MacBook's 16:10.
| What | Value |
|---|---|
| Screen aspect | 1.69 : 1 (landscape) |
| Screen area | 840 x 496, after a 44px title bar |
| Capture at | 1440 x 850, or 1600 x 945 |
| A 16:9 grab | Fine. Roughly 5% cropped off the sides |
| Texture resolution | Long edge pinned to 3200px |
| Export sizes | 1x, 2x or 4x PNG |
Crop your own browser chrome out first. This is the mistake specific to this frame, and it is the opposite of the iPhone's. Unlike the phone and the tablet, the window has no bezel inset — the screenshot runs edge to edge directly under the title bar.
So if you screenshot a whole browser window rather than just the page, you end up with two sets of tabs and two address bars stacked on top of each other. Capture the viewport only. Most browsers have a "capture page" option in devtools that does this, and the Chrome extension only ever captures the viewport, which sidesteps it entirely.
The address bar says yourproduct.com
It is drawn into the frame, and right now you cannot edit it. The bar reads
https://app.yourproduct.com with a padlock, in every render, at every
size.
For a generic marketing shot that is usually what you want — a real URL dates the image and invites people to go and check whether the page still looks like that. For a client presentation it is a giveaway. If the URL matters to your shot, the glass card frame has no address bar at all and is the better choice.
Making it editable is a small change — the string is drawn in one line of the frame code, so it needs that plus a text input in the inspector. It has not happened because nobody has asked for it. If you want it, saying so is the fastest way.
Three moves
- Drop the screenshot in. Drag a PNG onto the Screen panel, or pick one of the four demo screens if you just want to see it work.
- Tilt the window. Drag the canvas to rotate. Keep it gentle for this frame. Arrow keys nudge two degrees at a time, and
0resets the camera. - Export. Press
Efor a PNG orCto copy it straight to the clipboard.
When to use this instead of a device
A device frame tells the viewer where your product runs. If that is the point you are making, use one. If it is not, the bezel is decoration competing with your interface for attention, and this frame is the better tool.
In practice it wins for anything desktop-first: SaaS dashboards, admin panels, changelog posts, documentation screenshots, blog headers, and any before-and-after where the reader is meant to compare two layouts rather than admire a laptop. It loses for App Store listings, anything mobile, and any shot whose whole argument is that the product works on a phone.
What comes out
Three renders of the same frame at different angles and backdrops, all exported straight from the tool. The screens are real sites, not placeholder art. Note how far the frame is turned in each: this is the range where a skew still reads as perspective.
yaw -18, pitch 6
yaw 0, pitch 0
yaw 20, pitch 8, roll -2Where the render goes
Nowhere. The frame, the backdrop and the export all run in your browser on your own machine. There is no upload step and no account, and once the page has loaded you can disconnect from the internet and it still works. Closing the tab discards the screenshot. The privacy policy spells out the specifics.
The renders are yours to use commercially, client work included. The free tier bakes a small watermark into the exported file.