This page puts a website or web-app screenshot on a 3D laptop: an open lid with a thin bezel and a webcam, a keyboard deck with keys and a trackpad, lit with soft studio light. It starts with the tilted hero angle; the front, three-quarter and top views are one click away.
How to make a laptop mockup
- Capture the page in a desktop browser. The laptop's screen has a 16:10 shape, so a window of 1440 × 900 or 1680 × 1050 pixels fills it exactly. A full-page screenshot is shown whole and small; choose Fill the screen to show its top part across the screen instead.
- Upload the PNG or JPEG.
- Choose the colour: graphite, silver, midnight blue, soft gold or porcelain white. The polished edges stay bright on every colour, like the cut edges of an aluminium body.
- Pick the background and the format: 16:9 for website heroes, 1:1 or 4:5 for social posts.
- Download the picture, or choose Animation and Reveal for a video in which the lid opens and the screen switches on.
What to expect
- The screenshot is filtered in linear light and sampled like a real display seen at an angle, so small text stays readable in the three-quarter views instead of shimmering.
- A 16:9 screenshot keeps its whole width on the 16:10 screen, with thin bands above and below in the average colour of its edges; choose Fill the screen to crop a little from the sides instead.
- The 4K option makes a 3840-pixel-wide picture for print or large hero images.
Pitfalls
- A dark website on the Dark studio background can make the screen edge hard to see. The light studio or the pastel gradient give more contrast.
- Browser screenshots taken on a high-density display are large; that is fine, as they are scaled down before rendering and look sharper for it.
More about what this tool reads and writes: 3D Device Mockup Generator.