How to hide cookie banners on every site — 5 ready-to-paste snippets
GDPR was meant to give us control over cookies. It gave us pop-ups that block 30% of the screen on every other site. This article shows five ways to get rid of that wall once and for all — using CSS, JavaScript and the JustZix extension.
Is it legal?
Yes. GDPR and the ePrivacy Directive impose obligations on the site operator (must ask consent before setting cookies). On your side — as the user — you're free to modify how a site looks in your browser. Same as any ad blocker or Safari Reader Mode. One important caveat: hiding the banner usually does not count as consenting to cookies — most sites still only set strictly necessary cookies until you explicitly click "Accept".
Method 1 — universal CSS targeting popular classes
Simplest and safest. Catches ~80% of banners across the web:
/* Cookie banners — common class and ID patterns */
.cookie-banner,
.cookie-notice,
.cookie-consent,
.gdpr-banner,
.consent-banner,
#cookie-notice,
#cookieConsent,
#onetrust-banner-sdk,
[class*="CookieConsent"],
[id*="cookie-bar"] {
display: none !important;
}
/* Many banners lock body scroll until you click */
html, body {
overflow: auto !important;
position: static !important;
}The second block is critical — many banners set overflow: hidden on <body> to block scrolling until you accept. Forcing overflow: auto restores normal behaviour.
Method 2 — aggressive attribute selectors
When a site uses dynamic class names (Tailwind, CSS-in-JS) and the base pattern doesn't match, target attributes:
/* Catch anything with "cookie" or "consent" in class / ID */
[class*="cookie" i],
[id*="cookie" i],
[class*="consent" i],
[id*="consent" i],
[class*="gdpr" i],
[role="dialog"][aria-label*="cookie" i] {
display: none !important;
}The i flag in attribute selectors (e.g. [class*="cookie" i]) makes them case-insensitive. Without it, .CookieBanner wouldn't match "cookie".
Warning: this snippet can over-match — e.g. an article about cookies (the law!) gets hidden too. Use carefully, ideally in a folder of rules scoped to specific domains.
Method 3 — :has() selector (modern)
Since Chrome 105 and Safari 15.4 you can use :has() — a selector that targets an element containing a child matching a pattern. Perfect for cookie banners because they always have an "Accept" button inside:
/* Practical version — target fixed/sticky containers with an Accept button */
div:has(> button[aria-label*="Accept" i]),
div:has(> button[aria-label*="cookie" i]),
aside:has(> button[aria-label*="consent" i]) {
display: none !important;
}CSS doesn't support :contains() (that's a jQuery thing). We target the aria-label attribute instead — well-designed banners have one for screen readers anyway.
Method 4 — JavaScript auto-click "Accept"
When CSS isn't enough (banner in Shadow DOM, full-page blocker), JS auto-clicks for you. Faster than you can notice:
// Auto-click "Accept" buttons — works in iframes with cookies too
let attempts = 0;
const interval = setInterval(() => {
if (++attempts > 20) return clearInterval(interval);
const candidates = [
...document.querySelectorAll('button, a[role="button"], input[type="button"]')
];
const target = candidates.find(el => {
const text = (el.textContent || el.value || '').trim().toLowerCase();
const aria = (el.getAttribute('aria-label') || '').toLowerCase();
return /^(accept all|accept|allow all|i agree|agree|akceptuj)$/i
.test(text) || /accept|allow/.test(aria);
});
if (target) {
target.click();
clearInterval(interval);
}
}, 500);It polls every 500ms for 10 seconds (20 attempts × 500ms). Finds the first matching button — clicks and stops. In practice: you don't even see the banner.
Ethical note: by clicking "Accept" you consent to marketing cookies. If that bothers you — use Methods 1+2 (hide without accepting). The site then sees you as anonymous user who simply didn't respond.
Method 5 — Shadow DOM (extreme cases)
OneTrust, Cookiebot, Usercentrics — the most popular cookie banner SaaS — often render their UI inside Shadow DOM. CSS from outside the shadow root cannot reach there. You need JS:
// Find the host element (by popular names), reach into shadowRoot
function hideShadowBanners() {
const hosts = document.querySelectorAll(
'#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
);
hosts.forEach(host => {
host.style.display = 'none';
// Plus shadow content (if it uses shadow DOM)
if (host.shadowRoot) {
const style = document.createElement('style');
style.textContent = ':host { display: none !important; }';
host.shadowRoot.appendChild(style);
}
});
}
// First run + observer for late insertions
hideShadowBanners();
new MutationObserver(hideShadowBanners)
.observe(document.body, { childList: true, subtree: true });The MutationObserver also catches banners that insert themselves after DOMContentLoaded — typically tracker scripts load asynchronously and the banner shows up 1-2 seconds after page load.
How to plug this into JustZix
- Install the extension (download page — ZIP, 2 minutes).
- Click the JustZix icon → "New rule".
- URL pattern:
*(to apply everywhere) orhttps://example.com/*(one domain). - In the CSS tab, paste Method 1 (universal) — leave it active.
- If you hit a site where it doesn't hide — add Method 4 as a JS rule, scoped to that domain.
- Sync your key across devices — the banner disappears on your laptop, PC and work computer simultaneously.
Pitfalls worth avoiding
- Don't set
display: noneonhtmlorbody— you'd hide the entire page. - Page load may slow down slightly — the auto-accept JS polling 20 times runs the event loop. In practice unnoticeable.
- Some paywalls disguise themselves as cookie banners (e.g. major news sites) — hiding the banner doesn't unlock the content. Only a dedicated per-site rule helps there.
- A shop's banner may be legally required (e.g. checkout consent). Don't hide on sites where you plan to purchase.
What's next
The same approach works for other UX killers: newsletter pop-ups, "enable notifications", paywall previews. See more ready-to-paste snippets in the Examples section, or real use cases for JustZix.
Install JustZix and write your own rules. The first snippet in this article pasted into the extension = the banner is gone on 80% of sites. The rest is just iteration per problematic domain.
Rate this post
No ratings yet — be the first.