Most cookie consent banners are copied from whatever the last site used. That is how non-compliant patterns spread. A banner can look clean and modern and still break GDPR because it nudges people toward "Accept," hides the reject option, or fires trackers before anyone clicks anything.
Below are 12 cookie consent examples grouped by what they get right. The goal is not to admire screenshots. It is to give you a checklist of patterns you can copy with confidence and anti-patterns you should never ship. (This is a general explainer, not legal advice.)
What makes a cookie consent banner compliant (not just pretty)
Visual polish is the easy part. Compliance comes from behavior, not styling. Under GDPR and the ePrivacy rules, a compliant banner generally has to do four things:
- Block first. Non-essential cookies and trackers must not fire until the visitor gives consent. If your analytics and ad pixels load on page view, the banner is decorative.
- Make reject as easy as accept. Regulators have been clear that "Accept" and "Reject" should sit at the same level, same prominence, same number of clicks.
- Be specific and granular. Bundling everything into one "Accept" button is not informed consent. People should be able to choose categories.
- Record proof. You need a timestamped log of who consented to what, in case a regulator or user asks.
So the first test of any cookie consent sample is not "does it look good," it is "does it block trackers and offer a real choice." Everything else is presentation. If you want to see what actually fires on your own site before consent, run a free cookie scan and check whether trackers load on page load.
Anatomy of a good consent banner: accept, reject, preferences, granularity
The strongest cookie consent banner examples share the same skeleton. Three of our twelve patterns are really about this anatomy.
Example 1: The balanced three-button bar
A short banner pinned to the bottom with three equal buttons: Accept All, Reject All, and Manage Preferences. No color trick that makes Accept glow while Reject fades into the background. This is the safest default for a GDPR audience because the choice is genuinely symmetrical.
Why it works: a visitor can opt out in one click. That single design decision resolves the most common complaint regulators receive.
Example 2: The layered preference center
The first layer is a simple bar. Clicking "Manage Preferences" opens a second layer with toggles per category: Necessary (locked on), Analytics, Marketing, Functional. Each category has a one-line plain-English description.
Why it works: granularity without overwhelming people up front. Most visitors use layer one; the minority who care get real control in layer two.
Example 3: The expandable cookie table
Inside the preference center, each category expands to list the actual cookies, their providers, and retention periods. This is the gold standard for transparency and is effectively required for solid documentation.
Why it works: it proves you actually know what your site loads. Most teams do not, which is exactly why a real-browser scan beats guessing.
GDPR-style banners: explicit opt-in done right
In the EU, EEA, and UK, consent must be opt-in. Nothing non-essential runs until the visitor agrees. These examples show how to do that without nuking your analytics entirely.
Example 4: The pre-consent block with Consent Mode
The banner integrates Google Consent Mode v2. Before consent, Google tags load in a restricted state (no cookies, pinged signals only). After consent, they upgrade to full measurement. You stay compliant and still recover modeled conversions.
Why it works: it solves the false choice between "compliant" and "I still need data." You get both.
Example 5: The IAB TCF v2.2 ad-tech banner
For publishers running programmatic ads, the banner speaks the IAB Transparency and Consent Framework. It collects consent in the format ad partners require and passes the signal downstream.
Why it works: without a TCF string, compliant ad demand simply will not bid. This pattern is non-negotiable for ad-funded sites in Europe.
Example 6: The geo-targeted banner
The same site shows a strict opt-in banner to EU visitors and a lighter notice elsewhere. Detection happens at the edge based on the visitor's region.
Why it works: you respect each region's rules without forcing a single worst-case experience on everyone. A German visitor sees opt-in; a Texan sees an opt-out notice.
CCPA/US-style banners: opt-out and Do Not Sell patterns
US privacy laws like the CCPA and CPRA generally work the opposite way: cookies can load, but you must give people a clear way to opt out of the "sale" or sharing of their data.
Example 7: The "Do Not Sell or Share My Personal Information" link
A persistent footer link with that exact phrasing, leading to a simple opt-out toggle. No account required, no maze.
Why it works: California-style laws expect that specific language and a frictionless path. A clear link beats a buried form every time.
Example 8: The opt-out notice bar with GPC support
A slim top bar that explains data may be shared, plus automatic honoring of the Global Privacy Control browser signal. If a visitor's browser broadcasts GPC, the site treats it as an opt-out without any click.
Why it works: GPC honoring is increasingly treated as a legal requirement in the US, and respecting it automatically removes a whole class of complaints.
Minimalist vs detailed banners
There is constant tension between "keep it tiny" and "disclose everything." Both can be compliant. The trick is layering.
Example 9: The minimalist two-button card
A small rounded card in the corner: one line of text, Accept, Reject, and a quiet "Preferences" text link. Clean, fast, unobtrusive.
Why it works: minimal does not mean missing. As long as Reject is present and equal, a compact banner is fully compliant and far less annoying than a full-screen wall.
Example 10: The detailed informational banner
A wider banner with a short paragraph explaining categories, a link to the cookie policy, and the three core buttons. Suited to regulated industries like finance or health where over-communicating is the safer posture.
Why it works: it matches audience expectations. A bank's users tolerate (and arguably expect) more detail than a meme site's.
Rule of thumb: minimalist for layer one, detailed in layer two. Never hide the reject option to save space.
Mobile banner examples that do not kill conversions
On mobile, a bad banner can swallow the whole screen and tank engagement. These two patterns keep things compliant without wrecking the experience.
Example 11: The bottom-sheet banner
A banner anchored to the bottom of the viewport, sized so it never covers the main content or the primary call to action. Buttons are full-width and thumb-reachable, stacked rather than crammed side by side.
Why it works: it respects small screens and tap targets. Reject and Accept stay equally easy to hit, which is the part most mobile banners get wrong.
Example 12: The non-blocking notice with scroll-safe layout
The banner appears but does not lock scrolling or trap focus, and it never sits over navigation. Trackers still stay blocked until a choice is made, so "non-blocking UI" does not mean "non-compliant behavior."
Why it works: it separates two ideas people confuse. The interface can be gentle while the tracker-blocking stays strict.
Dark patterns to avoid
Every example above has an evil twin. These are the patterns regulators have penalized and the ones to keep out of your build:
- Accept-only banners. A single "Got it" or "Accept" button with no way to refuse. Not consent at all.
- The faded reject. A bright, high-contrast Accept next to a grey, low-contrast Reject. Unequal prominence is a documented violation.
- Reject buried two clicks deep. Accept is instant, but refusing means opening Preferences, scrolling, and saving. Asymmetry of effort fails the "as easy to reject" test.
- Pre-ticked boxes. Categories toggled on by default. Consent must be an active opt-in, so non-essential toggles start off.
- Load-then-ask. Trackers fire on page view and the banner is theater. This is the single most common failure, and a source-only scanner usually misses it because the trackers are injected by a tag manager at runtime.
- Nag walls and confirm-shaming. Full-screen overlays you cannot dismiss, or copy like "No thanks, I do not want a better experience." Coercion undermines valid consent.
If you only remember one thing: equal prominence for accept and reject, and block before you ask.
Build a compliant, on-brand banner with CookieBrain
The good news is you do not have to assemble any of this by hand. CookieBrain scans your site in a real headless browser, catching the trackers that tag managers, iframes, and runtime scripts inject (the ones source-only scanners and most plugins miss), then AI-categorizes every cookie for you. The banner serves from Cloudflare's edge in under 50ms, supports Google Consent Mode v2 and IAB TCF v2.2, handles geo-targeting, and logs consent proof automatically.
Install is one script line and it works on any stack: WordPress, Shopify, Webflow, or fully custom. You pick the layout and brand colors; the compliant behavior (block-first, equal accept/reject, granular categories) is built in by default.
Start with a free cookie scan to see exactly what your site loads today, no account needed. When you are ready to ship a banner that is compliant and on-brand, browse CookieBrain pricing (14-day free trial, no card required) or read more about how CookieBrain works. The fastest path to a banner like the best examples here is to let the scan do the hard part for you.