GDPR Banner Examples: 12 Consent Banners That Actually Comply

Cookie consent banners are the most visible part of GDPR compliance. They are also the part that most websites get wrong.

The rules are straightforward, but the implementation is where things break down. Many banners use dark patterns - design tricks that push users toward accepting all cookies. Others are missing required options entirely. Some are so vague they provide no meaningful information at all.

This guide examines 12 cookie consent banners. For each one, you will see what it does right, what it does wrong, and whether it meets the standard that EU data protection authorities expect.

What GDPR Requires From a Cookie Banner

Before looking at the examples, here is what the law requires:

• Prior consent for non-essential cookies. Analytical, advertising, and personalization cookies cannot be set before the user makes a choice.
• Clear information. The banner must explain what cookies are used and why.
• A way to accept. An "Accept All" or equivalent button.
• A way to reject. A "Reject All" button that is equally easy to find and use.
• Granular choices. The user must be able to accept some cookie categories and reject others.
• No pre-selected options. Cookie categories must be off by default (except strictly necessary cookies).
• Easy withdrawal. The user must be able to change their preferences later.

These requirements come from GDPR, the ePrivacy Directive, and enforcement guidance from authorities like the French CNIL, the Italian Garante, and the European Data Protection Board.

Now, the examples.

Example 1: The "Accept Only" Banner (Non-Compliant)

A small bar at the bottom of the page. It reads: "This site uses cookies. Accept." One button. No other options.

What it gets wrong:

There is no way to reject cookies. There is no information about what cookies are used. There is no link to a cookie policy. This is the bare minimum a site could display, and it does not meet any GDPR standard. Multiple data protection authorities have confirmed that a banner without a reject option is non-compliant.

Compliance rating: Fail.

Example 2: The "Accept or Leave" Banner (Non-Compliant)

A banner that reads: "By continuing to use this site, you agree to our use of cookies." No buttons at all - or sometimes an "OK" button.

What it gets wrong:

This relies on implied consent through continued browsing. GDPR requires explicit, affirmative consent. Simply visiting a page does not constitute agreement. The Planet49 ruling by the European Court of Justice made this clear. Continued browsing is not consent.

Compliance rating: Fail.

Example 3: Accept and Reject, But Reject Is Hidden (Non-Compliant)

A banner with a large, brightly colored "Accept All" button. A small text link reading "Manage preferences" is barely visible in a lighter font color at the bottom of the banner.

What it gets wrong:

While there is technically a way to reject cookies, it is deliberately harder to find and use than the accept option. This is a dark pattern. The French CNIL has fined companies specifically for this design choice. Google and Facebook both received fines because their reject option required more clicks than their accept option. The reject mechanism must be as prominent and easy to use as the accept mechanism.

Compliance rating: Fail.

Example 4: Equal Accept and Reject Buttons (Compliant)

A banner with two buttons side by side: "Accept All" and "Reject All." Both are the same size, same style, same visual weight. Below them, a "Customize" link opens a preferences panel.

What it gets right:

The user has a genuine choice. Neither option is more prominent than the other. There is also a way to make granular selections. This is the pattern that regulators have endorsed.

Compliance rating: Pass.

Example 5: Three-Button Banner With Categories (Compliant)

A banner with three buttons: "Accept All," "Reject All," and "Manage Preferences." The Manage Preferences button opens a panel showing cookie categories with toggle switches.

Categories listed:

• Necessary (always on, cannot be disabled)
• Analytics (off by default)
• Marketing (off by default)
• Personalization (off by default)

Each category has a brief description explaining its purpose.

What it gets right:

This is the gold standard. Users can make an informed, granular decision. Non-essential categories are off by default. Each category is explained. This meets every requirement.

Compliance rating: Pass.

Generate a compliant cookie banner for your website for free.

Example 6: Banner With Pre-Selected Toggles (Non-Compliant)

A banner that opens to a preferences panel where all cookie categories are toggled on by default. The user has to manually switch each one off.

What it gets wrong:

Pre-selected toggles are the same as pre-ticked checkboxes. They do not represent valid consent because the user has not made an affirmative choice to enable those cookies. All non-essential categories must be off by default.

Compliance rating: Fail.

Example 7: Cookie Wall - Accept or Leave (Non-Compliant)

A full-screen overlay that blocks all content. The message reads: "To access this website, you must accept cookies." The only option is "Accept All."

What it gets wrong:

This is a cookie wall. It makes access to the website conditional on accepting cookies. Most EU data protection authorities consider cookie walls non-compliant because consent is not freely given if the alternative is losing access entirely. The EDPB has stated that cookie walls generally do not provide valid consent.

There is some nuance here. A few authorities allow cookie walls if a genuine alternative is offered, like a paid subscription. But for most websites, especially small business sites, a cookie wall is a clear violation.

Compliance rating: Fail.

Example 8: Layered Banner With Clear Information (Compliant)

A banner that appears with a brief summary: "We use cookies for analytics and advertising. Choose your preferences below." Two buttons: "Accept All" and "Reject All." A third option: "See Details."

Clicking "See Details" expands the banner to show:

• A list of cookie categories with descriptions
• The specific cookies in each category, with names and expiration times
• Toggle switches for each category (off by default)
• Links to the privacy policy and cookie policy

What it gets right:

This layered approach provides both simplicity and depth. Users who want a quick decision can accept or reject everything. Users who want details can drill down into specific cookies. The information is thorough without being overwhelming.

Compliance rating: Pass.

Example 9: Banner That Loads Cookies Before Consent (Non-Compliant)

A banner appears asking for consent, but the website has already loaded Google Analytics, Facebook Pixel, and several advertising cookies before the user makes any choice.

What it gets wrong:

Non-essential cookies must not be set before the user consents. This is a fundamental requirement. The banner is meaningless if the tracking has already started. Many websites make this mistake because their tag management is not properly configured to wait for consent signals.

This is one of the hardest issues to spot visually. You need to inspect network requests or use a scanning tool to see what cookies load before consent. For a deeper look at how first-party and third-party cookies work, see our guide on first-party vs third-party cookies.

Compliance rating: Fail.

Example 10: Mobile-Friendly Consent Banner (Compliant)

A bottom sheet banner optimized for mobile screens. It takes up about a third of the screen. Two equally sized buttons stack vertically: "Accept All" on top, "Reject All" below. A "Preferences" link sits underneath.

The text is short: "We use cookies. See our cookie policy for details."

What it gets right:

Mobile compliance matters. Many banners that work on desktop become unusable on mobile - tiny buttons, overlapping text, or preferences panels that cannot scroll. This banner adapts to the screen size while keeping both options equally accessible.

Compliance rating: Pass.

Example 11: The "Legitimate Interest" Banner (Non-Compliant)

A banner that uses "legitimate interest" as the legal basis for analytics and marketing cookies. The preferences panel shows these categories pre-enabled under "legitimate interest" rather than consent.

What it gets wrong:

Cookie consent falls under the ePrivacy Directive, which requires consent for non-essential cookies. Legitimate interest under GDPR does not override this requirement. You cannot use legitimate interest as a workaround to avoid getting consent for tracking cookies. Several data protection authorities have issued guidance specifically rejecting this approach.

Compliance rating: Fail.

Example 12: Minimal But Compliant Banner (Compliant)

A simple banner with clean design. It reads: "We use cookies for analytics. Accept or reject below." Two buttons: "Accept" and "Reject." A link to the full cookie policy.

No preferences panel. No categories. Just a binary choice.

What it gets right:

If your website only uses one category of non-essential cookies, you do not need a complex preferences panel. A simple accept/reject choice is sufficient. This banner is honest about what it does, provides a real choice, and links to more information. Sometimes simple is better.

Compliance rating: Pass.

A Simple Compliant Cookie Banner in HTML and CSS

If you want to build a basic compliant banner yourself, here is a starting point:

<div id="cookie-banner" role="dialog" aria-label="Cookie consent">
  <div class="cookie-banner-content">
    <p>
      We use cookies for analytics and personalization.
      <a href="/cookie-policy">Learn more</a>.
    </p>
    <div class="cookie-banner-actions">
      <button id="cookie-reject" class="cookie-btn">Reject All</button>
      <button id="cookie-accept" class="cookie-btn">Accept All</button>
      <button id="cookie-manage" class="cookie-btn-link">Manage Preferences</button>
    </div>
  </div>
</div>

<style>
  #cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 16px 24px;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }
  .cookie-banner-content {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .cookie-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .cookie-btn {
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    color: #333;
  }
  .cookie-btn:first-child {
    background: #fff;
    color: #333;
  }
  .cookie-btn:nth-child(2) {
    background: #333;
    color: #fff;
  }
  .cookie-btn-link {
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    color: #555;
  }
</style>

Notice that both buttons have equal visual weight. The reject button comes first, which avoids the pattern of pushing users toward accepting. The "Manage Preferences" option is available but does not crowd the primary choices.

This is a starting point. You will need JavaScript to handle the actual consent logic - storing preferences, blocking cookies until consent is given, and sending consent signals to your tag manager.

If you do not want to build this yourself, Scanibly offers a free consent banner generator that handles all of this for you.

Common Cookie Banner Mistakes to Avoid

Based on the 12 examples above, here are the mistakes that regulators look for:

Making "Reject" harder than "Accept"

If accepting takes one click but rejecting takes three, that is a dark pattern. Both options must be equally accessible.

Loading cookies before consent

Your consent management must actually block non-essential cookies until the user decides. A banner that appears after cookies are already loaded is just decoration.

Using vague descriptions

"Functional cookies to improve your experience" is not informative. State specifically what each cookie category does.

Forgetting to let users change their mind

There must be a way to revisit cookie preferences after the initial choice. A link in the footer or a floating icon works. The key is that it must be accessible without clearing browser data.

Not recording consent

You need to keep a record of when and how consent was given. If a regulator asks, you must be able to demonstrate that valid consent was obtained.

How to Check If Your Cookie Banner Is Compliant

Review your banner against this quick checklist:

1. Is there an Accept All button?
2. Is there a Reject All button of equal prominence?
3. Are granular preferences available?
4. Are non-essential categories off by default?
5. Are cookies blocked until consent is given?
6. Can the user change preferences later?
7. Is there a link to your cookie policy?
8. Does the banner work properly on mobile?

If any answer is "no," your banner needs work.

For more on consent mechanisms beyond cookie banners, including form checkboxes and email signups, see our guide on GDPR consent examples.

Scan Your Cookie Banner for Free

You do not have to check all of this manually. Run a free scan on your website and Scanibly will analyze your cookie banner, check what cookies load before consent, and flag any compliance issues. The scan takes seconds and gives you a clear list of what needs to be fixed.