01 Layout
Renders a desktop mockup on the left and a phone mockup on the right, in one exported image.
02 Screenshots
Drop a screenshot, click to browse, or paste
PNG or JPG
Desktop
Drop / click
Mobile
Drop / click
or capture from a live URL
Advanced: how this works
Capturing a real webpage needs a headless-browser service, since a browser tab can't screenshot another site's page directly. This uses Microlink's free screenshot API — it renders a proper desktop and mobile viewport of the page and hands back real images. Their free anonymous tier is rate-limited; if a capture fails, try again shortly, or upload a screenshot manually instead.
03 Frame style
03 Desktop frame style
The mobile mockup always uses a phone frame.
04 Address bar text
05 Background
06 Padding
07 Pair layout
Gap between the two mockups
Mobile size, relative to desktop height
08 Corner radius
09 Shadow
10 Export
No screenshot loaded.
Upload one on the left, or capture a live URL — Webnail frames it right here on a canvas you can export as PNG. Add a desktop and a mobile screenshot on the left, or capture a URL, to build the side-by-side mockup.
Upload one on the left, or capture a live URL — Webnail frames it right here on a canvas you can export as PNG. Add a desktop and a mobile screenshot on the left, or capture a URL, to build the side-by-side mockup.