Open your site in Mobile Preview, choose a device, click Capture, pick frame on or off, a transparent or solid background and 2× or 3× resolution, then save or copy the PNG. It is free and works in portrait and landscape. It uses the Chrome, Edge, Brave or Chromium already installed on your computer.
What it is good for
- README and documentation images.
- Product Hunt, launch posts and social media.
- Portfolios and case studies.
- App and extension listings that show a web UI.
Steps
- Open your page in Mobile Preview with “Mobile Preview: Show”.
- Pick the device frame and orientation.
- Click Capture and choose frame, background and scale.
- Save the PNG or copy it.
Good to know
- A transparent background lets you place the phone on any colour or gradient.
- 3× gives a sharper image for large placements.
- The page is rendered by a Chrome, Edge, Brave or Chromium already installed; if none is found, set the browser path in the extension settings.
- Over SSH, in Codespaces or in WSL, the browser is looked up on the remote machine.
Frequently asked questions
- Is the screenshot export free?
- Yes. Framed screenshots are included in the free version of Mobile Preview.
- Can I get a transparent background?
- Yes. Choose a transparent background to place the framed device on any colour or image.
- Which devices can I use for the frame?
- The free version includes three iPhones. Pro, a one-time payment of €6.99, adds more iPhones, Android phones, iPads and Android tablets.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · The viewport meta tag explained: what it does and the one line you need · 100vh on mobile: why it overflows and how to fix it with dvh · Safe areas in CSS: avoid the notch and the Dynamic Island · Tailwind breakpoints vs real phones and tablets · A mobile checklist for AI-generated UI (what usually breaks first)