How do I make a website mockup?

Take a screenshot of the site, upload it or paste it here, pick a frame and a background, then click Download PNG. Add a phone screenshot too if you want the laptop and phone combination to show the mobile layout.

Are my screenshots uploaded anywhere?

No. The mockup is drawn in your browser, and your images never leave your device.

What size screenshot works best?

For desktop frames, a screenshot about 1440 pixels wide works well. For the phone frame, use a screenshot from a phone or a browser set to about 390 pixels wide. The frame shows the top of the page, so tall full-page screenshots are fine.

Can I use the mockups commercially?

Yes. The frames are simple shapes we draw ourselves, so you can use the exported images in portfolios, pitches and client work.

Can I get a transparent background?

Yes. Choose Transparent and the PNG keeps a transparent background, ready to place on any design.

All tools

Website Mockup Generator

Put your screenshot in a browser, laptop or phone frame.

Example. Add your screenshot below

Your screenshot

DesktopChoose an image, or drop it herePhone versionOptional

You can also paste a screenshot. It never leaves your browser.

Frame

Background

Shadow

Large PNG, 2400px wide. No watermark.

More free tools

Good to know

Tips for Better Mockups

Screenshot the page at the size it was designed for. A desktop screenshot taken in a narrow window will look cramped inside a laptop frame, and a desktop screenshot squeezed into a phone frame won't look like a real phone. Your browser's device mode, or a real phone, gives you an honest mobile shot.

Close cookie banners and chat bubbles before you take the screenshot, and pick a background that matches where the mockup will appear. Transparent works for slides and case studies.

Need a Site to Show Off?

If you're building a portfolio, our portfolio templates are scored by designers and developers, and many of the best are free on Framer.