--- title: Create a Website Mockup From a URL: Free, Every Device url: https://sukeshdas.com/website-mockup-from-url/ description: Paste a URL and get a free iMac, MacBook, iPad and iPhone mockup of any website in about a minute. Step by step, with real examples and tips. --- [Home](https://sukeshdas.com/)[Blog](https://sukeshdas.com/blog/)[Website & Conversion](https://sukeshdas.com/category/website-conversion/) # How to Create a Website Mockup From a URL (Free, Every Device) By Sukesh Das October 2, 2026 3 min read ![Website Mockup Generator homepage on a desktop computer](https://sukeshdas.com/wp-content/uploads/2026/10/website-mockup-generator-desktop-1-1024x576.webp) On this page 1. What you get 2. Step by step 3. Why real widths matter 4. Tips for a clean mockup 5. When a site won’t load 6. Need the website, not just the mockup? 7. Frequently asked questions A good mockup shows a website the way a client imagines it: on a real screen, on a desk, on a phone in someone’s hand. Making one used to mean Photoshop templates, smart objects and a screenshot for every device. If the site is already live, or on a public staging link, you can now do it straight from the URL. **Quick answer:** Open the free [Website Mockup Generator](https://sukeshdas.com/website-mockup/), paste the site’s URL and click Generate mockup. The site loads live on an iMac, a MacBook, an iPad and an iPhone, each at its real screen width. Arrange the devices, pick a background, then click Capture whole canvas to save a PNG. ## What you get Here is a mockup made with the tool for a speech therapy practice I built. Every device shows the layout that size of screen actually gets: the desktop site on the iMac and MacBook, the tablet layout on the iPad and the mobile layout on the iPhone. ![The Speech Therapy Boutique website on four devices, a multi-device mockup made from its URL](https://sukeshdas.com/wp-content/uploads/2026/10/wm-mockup-stb.webp) ## Step by step 1. **Paste the URL.** Type the address at the top, for example *yourclient.com* , and click **Generate mockup** . 2. **Let it settle.** Give it a few seconds for fonts, sliders and animations to finish. Each frame is a live page, so you can scroll it or close a cookie banner. 3. **Arrange it.** Turn devices on or off, drag them around, choose **Front** or a perspective angle, and pick a background colour. 4. **Save it.** On a computer, click **Capture whole canvas** , or **Capture selected area** to crop. Your browser asks which tab to share: pick this one, and the PNG downloads. ![Website Mockup Generator interface with a live site loaded on four devices and the layout controls on the left](https://sukeshdas.com/wp-content/uploads/2026/10/wm-ui-vl.webp) You can also link straight to a ready-made preview by adding the address to the link, for example *sukeshdas.com/website-mockup/?url=yourclient.com* . That is handy for sending a client a quick look at their site on every device. ## Why real widths matter A lot of mockup tools paste one desktop screenshot into every frame, so the phone shows a tiny desktop site. That looks wrong to anyone who builds websites, and to clients who open their site on a phone every day. This tool loads each device at the width it really uses: 1440 pixels for the iMac and MacBook, 810 for the iPad and 390 for the iPhone. If the mobile menu is broken, you will see it. ![Cobalt Regenerative website mockup on iMac, MacBook, iPad and iPhone with a custom background colour](https://sukeshdas.com/wp-content/uploads/2026/10/wm-mockup-cob.webp) ![Website Mockup Generator website on a desktop computer and a laptop](https://sukeshdas.com/wp-content/uploads/2026/10/website-mockup-generator-desktop-laptop.webp) ## Tips for a clean mockup - Close pop-ups and chat bubbles inside each frame before you capture. - Scroll the phone to a different section from the desktop to show more of the site in one image. - Take the background colour from the site’s own palette so the image feels branded. - Turn on **Larger mockups** for a bigger, sharper export. ## When a site won’t load The tool fetches the page for you, so a few sites refuse it: ones behind strict bot protection such as some Cloudflare settings, password-protected pages and local development sites. For those, use a public staging link, or take screenshots and use a static mockup instead. ## Need the website, not just the mockup? I design and build websites on [WordPress](https://sukeshdas.com/services/wordpress-web-design/), [Squarespace](https://sukeshdas.com/services/squarespace-web-designer/) and custom code, and every project in my [portfolio](https://sukeshdas.com/portfolio/) is shown this way. If you’re planning a new site, [let’s talk](https://sukeshdas.com/contact-us/). ## Frequently asked questions ### Is the website mockup generator free? Yes. No signup, no watermark and no limit. ### Can I make a mockup on my phone? You can build and preview one on a phone, but saving it needs a desktop browser, because mobile browsers don’t allow screen capture. ### Can I use the mockups commercially? Yes, for showing your own or your clients’ websites in portfolios, proposals and posts. Apple device frames are recognisable, so avoid implying any endorsement by Apple. ### Why does a site look different from my screenshot? Each frame loads the site fresh, so you see what a new visitor sees: no logged-in toolbar, and any cookie banner or pop-up still showing until you close it. Related service [WordPress website development](https://sukeshdas.com/services/wordpress-web-design/) Custom WordPress sites on a lightweight theme, with the block editor set up the way you will actually use it and only the plugins you need. [See the service](https://sukeshdas.com/services/wordpress-web-design/) [Case study: Supernova Sciences](https://sukeshdas.com/project/supernova-sciences/) Share this article - [Free tools](https://sukeshdas.com/tag/free-tools/) - [Mockups](https://sukeshdas.com/tag/mockups/) - [Portfolio](https://sukeshdas.com/tag/portfolio/) ![Sukesh Das](https://sukeshdas.com/wp-content/uploads/2026/09/profile-Sukesh-Das-150x150.webp) Written by Sukesh Das Web designer and developer with 1,200+ sites built. If this article describes your problem, I can fix it for you. [Ask me about your site](https://sukeshdas.com/contact-us/) ## Start the discussion [Cancel reply](/website-mockup-from-url/?format=md#respond) On this page 3 min read 1. What you get 2. Step by step 3. Why real widths matter 4. Tips for a clean mockup 5. When a site won’t load 6. Need the website, not just the mockup? 7. Frequently asked questions Browse topics - [Divi2](https://sukeshdas.com/category/tips-tricks/divi/) - [Elementor1](https://sukeshdas.com/category/tips-tricks/elementor/) - [SEO & Local SEO1](https://sukeshdas.com/category/seo-local-seo/) - [Squarespace1](https://sukeshdas.com/category/squarespace/) - [Tutorial1](https://sukeshdas.com/category/tutorial/) - [Website & Conversion6](https://sukeshdas.com/category/website-conversion/) - [All articles](https://sukeshdas.com/blog/) Want this handled for you? Send a short brief and get a fixed quote. [Get a free quote](https://sukeshdas.com/contact-us/) Keep reading ## More from the *blog.* [All articles](https://sukeshdas.com/blog/) Website & Conversion Oct 2, 2026 ### [Coaching Website Gets No Discovery Calls? 5 Reasons and Fixes](https://sukeshdas.com/coaching-website-no-discovery-calls/) Coaching website gets visitors but no discovery calls? See the 5 reasons coaches lose bookings and… 5 min read Website & Conversion Oct 2, 2026 ### [Best Free Website Mockup Generators Compared (From a URL or a Screenshot)](https://sukeshdas.com/best-free-website-mockup-generators/) TechSini, Shots.so, Placeit and Canva Mockups compared on how they work, what you can download and… 4 min read Website & Conversion Oct 2, 2026 ### [Responsive Website Mockups for Your Portfolio: 7 Tips That Win Clients](https://sukeshdas.com/responsive-website-mockups-portfolio/) How to present website projects so clients trust you: multi-device mockups, real layouts, scrolling previews and… 3 min read