How to hide cookie walls and consent popups with CSS
Cookie banners are the tax you pay for visiting almost any website in 2026. They cover content, block scrolling, and demand a click before you can read a single word. With JustZix you can make them disappear automatically on every site you choose.
Why a CSS rule beats clicking "Reject all"
Clicking through consent dialogs is repetitive and slow, and many of them hide the "Reject" button behind an extra menu. A JustZix rule runs the moment the page loads, so the banner never gets a chance to interrupt you. You set it once per site (or once with a broad URL pattern) and forget about it.
The trick is that most banners are just regular DOM elements with predictable class names. Hide the element, restore scrolling, and the page behaves as if the banner was never there.
Recipe 1: Hide the banner and restore scrolling
Most consent libraries lock the page by adding overflow: hidden to the <body> or <html> element. Hiding the banner alone is not enough — you also have to unlock the scroll.
/* Generic cookie-banner cleanup */
[id*="cookie"], [class*="cookie-banner"],
[class*="consent"], [id*="consent"],
[aria-label*="cookie" i] {
display: none !important;
}
/* Restore scrolling that the banner locked */
html, body {
overflow: auto !important;
position: static !important;
}The i flag inside [aria-label*="cookie" i] makes the match case-insensitive, so it catches "Cookie", "COOKIE" and "cookie" alike.
Recipe 2: Remove the dark backdrop overlay
Some sites dim the whole page behind the dialog with a fixed, full-screen overlay. Even after you hide the dialog, that grey layer can stay and swallow your clicks.
/* Remove the dimming backdrop */
.modal-backdrop, .overlay, .cookie-overlay,
[class*="backdrop"], [class*="scrim"] {
display: none !important;
pointer-events: none !important;
}Recipe 3: A JS fallback for stubborn banners
A handful of consent tools rebuild the banner after the CSS loads, or render it inside a shadow DOM that CSS cannot reach. For those, a small JavaScript rule does the job. JustZix runs it on the pages you target.
// Remove late-rendered consent nodes
const KILL = ['cookie', 'consent', 'gdpr', 'privacy-banner'];
function sweep() {
document.querySelectorAll('div, section, aside').forEach(el => {
const id = (el.id + ' ' + el.className).toLowerCase();
if (KILL.some(k => id.includes(k)) && el.offsetHeight < 600) {
el.remove();
}
});
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
}
sweep();
new MutationObserver(sweep).observe(document.body, {
childList: true, subtree: true
});The offsetHeight < 600 guard is a safety net: it stops the script from deleting a genuine article that happens to mention "privacy" in a class name.
Targeting the right URLs
If you want this everywhere, use a wildcard pattern such as *://*/*. If a particular site breaks, narrow the rule to that domain instead. JustZix lets you keep both a global cleanup rule and per-site overrides, and the more specific rule wins.
- Global:
*://*/*for the generic CSS above. - Per-site:
https://news.example.com/*for a tweaked selector.
When to stop hiding and start clicking
Hiding a banner with CSS does not send a consent choice to the site. For most reading that is fine — no banner, no tracking dialog. But if a site genuinely refuses to function until you respond, click "Reject all" once and let JustZix hide the banner on later visits.
Get started
Grab the extension from the download JustZix page, then browse our ready-made examples for more cleanup snippets. Once banners are gone, the next annoyance is usually pop-ups — see our guide on killing newsletter and signup pop-ups.
Five minutes of setup buys you a cleaner web for good. Save your rules, export them as a backup, and enjoy pages that load straight to the content.
Rate this post
No ratings yet — be the first.