Tutorial · 6 min read

How to Take Clean Website Screenshots: No Cookie Banners, Pop-ups, or Half-Loaded Pages

Cookie consent bars, chat bubbles, lazy-loaded images, and animations ruin marketing screenshots. Here is how to capture a clean, fully loaded page every time - manually or from a URL.

website screenshot
hide cookie banner screenshot
clean screenshot
website mockup

You take a screenshot of your homepage for the launch post, and there it is: a cookie banner across the bottom, a chat bubble in the corner, and a hero image that had not finished loading. None of it is visible to you any more, because you dismissed it months ago - but every fresh visitor, and every screenshot tool, sees it.

Here is how to get a clean capture every time.

The usual culprits

Problem	Why it happens	Fix
Cookie consent banner	Fresh sessions have not consented yet	Block consent scripts, or dismiss before capture
Chat widget bubble	Support widgets load on every page	Block the widget, or hide it with a query flag
Blank or grey images	Lazy loading waits for scroll or idle time	Wait a few seconds before capture
Mid-animation hero	Entrance animations run on load	Wait until animations finish
Wrong fonts	Web fonts still loading	Wait for fonts, or capture after network idle
Newsletter pop-up	Timed or exit-intent modals	Block the script, or capture before the timer fires

Manual: in your own browser

Open a private window so you see exactly what new visitors see.
Dismiss the cookie banner - choose the minimal option, so tracking scripts do not add more widgets.
Scroll down and back up. This triggers lazy-loaded images and finishes entrance animations.
Wait a few seconds, then capture the viewport using DevTools' "Capture screenshot" with the device toolbar set to your target size (for example 1440 × 900 at 2x for a laptop frame).

This works, but it is fiddly to repeat for every page and every device size.

For your own site: a screenshot mode

If you capture your own site often, add a "screenshot mode" that hides overlays when a query parameter is present:

// e.g. https://example.com/?screenshot=1
if (new URLSearchParams(location.search).has('screenshot')) {
  document.documentElement.classList.add('screenshot-mode');
}

.screenshot-mode .cookie-banner,
.screenshot-mode .chat-widget,
.screenshot-mode .promo-modal {
  display: none !important;
}

It also keeps captures consistent across your team - everyone shoots the same clean page.

From a URL, automatically

When you generate mockups from a URL in URL2Mockup, the capture options handle the common cases:

Hide cookie banners blocks popular consent-management scripts before the page loads, so the banner never appears.
Wait after load (2 or 5 seconds) gives lazy images, fonts, and animations time to settle on slower pages.
Fresh capture skips the 24-hour cache when you have just changed the page and need the latest version.

Open Capture options under the URL field in the dashboard, pick what the page needs, and capture. If a site still shows an overlay - some sites build their own banners - take the screenshot manually as above and use screenshot to mockup instead.

A quick quality check before you export

No consent bar, chat bubble, or modal
All images loaded - no grey boxes
Final fonts, not fallback fonts
Hero animation finished
No personal or customer data visible
Captured at 2x or higher for sharpness

FAQ

Why do screenshot tools always show the cookie banner?

They load the page as a brand-new visitor with no stored consent, so the banner appears exactly as it would for anyone else. Blocking consent scripts or adding a screenshot mode avoids it.

How long should I wait before taking a screenshot?

Two seconds after load is enough for most sites. Pages with heavy animations or client-side rendering may need five.

Is it OK to hide the cookie banner in marketing images?

Yes - marketing images show the product, not the consent flow. The banner still appears for real visitors on the live site.