Crumb

10 Best Cookie Banner Examples (2026)

Published July 8, 2026 · by the Crumb team

A great cookie banner does three jobs at once. It satisfies the law — GDPR, CCPA, and the growing family of state and national privacy rules that demand a real, informed choice before anything non-essential runs. It carries the brand, because the consent banner is often the literal first pixel a visitor interacts with on your site. And it respects the user’s time, offering a clear decision instead of a puzzle. Compliance × brand × UX: miss any one of the three and the other two suffer.

Most banners fail all three. You know the one: a generic gray rectangle in someone else’s font, a wall of legal text nobody reads, an oversized ACCEPT button lording over a gray-on-gray “manage preferences” link. It screams “plugin” before your homepage gets a word in — and increasingly, it also fails audits, because regulators have started treating lopsided buttons and buried reject options as invalid consent.

The ten examples below show how strong brands would get it right. Each mockup is a live CSS recreation built with Crumb’s banner designer in each brand’s visual language — the copy is our own generic consent text written in their voice, not scraped from their sites. For each one we pull out a design trait worth stealing and a compliance trait worth keeping.

1. Apple — restraint as a brand statement

Apple
White · SF-minimal · Quiet
Your privacy comes first.
We use a small set of cookies to make this site work and to understand how it’s used. You choose which ones stay.
DeclineAllow
Recreated with Crumb's designer — not affiliated with or endorsed by Apple.

Nothing about this banner asks for attention, and that is exactly the point. A single hairline border, system typography, one blue pill — the same visual grammar as the rest of the site, so the consent moment feels like part of the product rather than an interruption bolted on by legal. The design lesson: when your banner inherits your type and spacing, it reads as trustworthy by association. The compliance lesson is in the copy. Two short sentences, zero jargon, and a decline option presented in the same breath as accept. Plain language is not just good manners; regulators on both sides of the Atlantic have made clear that consent buried in legalese is not informed consent at all.

Recreate this style →

2. Stripe — clarity, engineered

Stripe
Clean white · Indigo accent · Precise
Cookies on this site
We use cookies for essential functionality, analytics, and to improve what we show you. Read our cookie policy for details.
Reject allAccept all
Recreated with Crumb's designer — not affiliated with or endorsed by Stripe.

A full-width bar tucked against the bottom edge, one indigo accent, and language that sounds like it was written by the same people who write the API docs. The design trait worth stealing is proportional emphasis: the bar is present but never towers over the page, because Stripe treats consent as information architecture, not a sales pitch. The compliance trait is the one regulators keep circling in red ink: “Reject all” sits directly beside “Accept all,” one click each. No “manage settings” maze, no second screen to hunt through. If declining takes more effort than accepting, European data-protection authorities increasingly treat the consent as invalid — and this layout simply removes the question.

Recreate this style →

3. Glossier — consent with personality

Glossier
Millennial pink · Rounded · Playful
Cookies (the internet kind)
We use a few to remember you and keep things running smoothly. Pick exactly what you’re comfortable with.
No thanksSounds good
Recreated with Crumb's designer — not affiliated with or endorsed by Glossier.

Blush-pink card, generous corner radius, and copy that sounds like a friend texting rather than a compliance department clearing its throat. The design insight is that voice is a visual element: the same two buttons feel completely different when they say “No thanks” and “Sounds good” instead of DENY and ACCEPT. Personality lowers the perceived stakes, which is why playful banners often see higher engagement with the choice itself rather than reflexive dismissal. The compliance trait: beneath the charm, the categories are real and separable — the promise to “pick exactly what you’re comfortable with” is backed by genuine granular controls. Charm without real choice is a dark pattern in a nicer outfit; charm with real choice is great UX.

Recreate this style →

4. Nike — bold without bullying

Nike
Black · High contrast · All-caps
Privacy & cookies
We use cookies to power your experience and improve what we show you. Your call — accept them or don’t.
DECLINEACCEPT
Recreated with Crumb's designer — not affiliated with or endorsed by Nike.

A slab of black across the bottom of a white page, all-caps CTAs, and copy with the cadence of a locker-room speech. This is the loudest banner on the list, and it works because the loudness is the brand — a pastel rounded card would feel like a different company entirely. The design trait: total commitment to contrast, with the banner as confident as the campaign photography above it. The compliance trait is the discipline underneath the swagger: DECLINE and ACCEPT are pill buttons of identical size, weight, and prominence. Equal visual weight is where regulator guidance is clearly heading — several EU authorities already flag banners where the reject option is a ghost link next to a neon accept button. Bold is fine. Biased is not.

Recreate this style →

5. Airbnb — warmth in the details

Airbnb
White · Coral accent · Soft-rounded
Your privacy, your choice
We use cookies to make the site work, personalize your experience, and understand what’s useful. Adjust anytime.
DeclineAccept
Recreated with Crumb's designer — not affiliated with or endorsed by Airbnb.

A soft white card floating in the corner, coral accent, corners rounded just enough to feel hand-finished. Airbnb’s entire interface is built on approachability, and the consent card carries that through: friendly headline, a soft shadow instead of a hard border between you and the page. The design trait is placement as courtesy — the card sits in the lower corner where it announces itself without covering the listings you came to see. That is also the compliance trait: non-intrusive placement. Consent walls that black out the entire page pressure users into clicking whatever makes the wall disappear, which undermines the “freely given” requirement at the heart of GDPR. A corner card lets people read, think, and choose — which is the whole idea.

Recreate this style →

6. Notion — the quiet default

Notion
Monochrome · Bordered · Utility-first
Cookies
We use cookies to keep things fast and to understand what’s useful. You decide which categories run.
Only necessaryAccept all
Recreated with Crumb's designer — not affiliated with or endorsed by Notion.

One word for a headline, a single-pixel border, black buttons on white. Notion’s banner looks like a Notion block, which is the highest compliment a consent UI can earn: it disappears into the product’s design system so completely that it could be a native feature. The design trait is monochrome discipline — when your product is a calm writing surface, the last thing your users need is a technicolor interruption. The compliance trait is brevity as clarity: twenty-odd words that say exactly what happens and who decides. Long banners get skimmed; short ones get read. And “Only necessary” is a genuinely honest reject label — it tells users precisely what they keep, not just what they lose.

Recreate this style →

7. Aesop — understatement as luxury

Aesop
Warm taupe · Serif · Understated
A note on cookies
We employ a small number of cookies to ensure the site functions as intended. You are welcome to decline the rest.
DeclineAccept
Recreated with Crumb's designer — not affiliated with or endorsed by Aesop.

A taupe bar, cream serif type, square-cornered buttons, and prose that reads like the label on one of their amber bottles: “You are welcome to decline the rest.” Aesop proves that a cookie banner can whisper. The design trait is typographic fidelity — carrying the serif voice into the consent layer signals that every surface of the experience was considered, which is precisely what a luxury brand sells. The compliance trait: understatement never becomes obstruction. The decline action is right there in the bar, equal in size, one click, no submenu. Quiet design and easy refusal are not in tension — if anything, a brand confident enough to murmur is also confident enough to take no for an answer gracefully.

Recreate this style →

8. Spotify — dark mode done right

Spotify
Near-black · Green accent · Rounded
Your data, your call
We use cookies to keep things playing and to tailor what you see. Fine-tune each category in your settings.
DeclineAccept
Recreated with Crumb's designer — not affiliated with or endorsed by Spotify.

Most consent platforms ship a white banner and call it a day — which is why so many dark-themed sites greet you with a blinding rectangle at midnight. Spotify’s card stays in-world: charcoal surface, that unmistakable green reserved for the single primary action, pill buttons that echo the play controls. The design trait is theme awareness — a banner that respects dark mode respects the user’s eyes and the brand’s atmosphere at once. The compliance trait is the settings path: alongside the two headline buttons, users are pointed to genuinely granular, per-category controls. Offering real fine-tuning — not a fake toggle page where everything is pre-checked — is what separates preference centers that satisfy auditors from those that merely decorate.

Recreate this style →

9. McDonald's — loud, fast, and fair

McDonald's
Red & yellow · Top bar · High visibility
We use cookies
They help the site run and show you offers you’ll actually want. Take them or leave them — it’s your order.
No thanksAccept all
Recreated with Crumb's designer — not affiliated with or endorsed by McDonald's.

Red bar, yellow button, top of the page, zero ambiguity. Where most of this list plays it cool, McDonald’s goes full billboard — and for a brand built on being seen from the highway, that is the correct answer. The design trait is unapologetic brand color: the banner is instantly identifiable as McDonald’s from across the room, which paradoxically makes it feel less like third-party adware than a tasteful gray box would. The compliance trait is immediacy: the choice is presented at the very top of the very first view, before any non-essential script has a reason to run. Consent collected up front, with both options one tap away, beats an elegant banner that loads three seconds after your analytics already fired.

Recreate this style →

10. Patagonia — utilitarian honesty

Patagonia
Earthy neutral · Utilitarian · Matter-of-fact
About the cookies here
We use as few as we can: some to run the site, a couple to learn what’s working. Turn off anything non-essential.
Essentials onlyAllow all
Recreated with Crumb's designer — not affiliated with or endorsed by Patagonia.

No gradient, no pill buttons, no exclamation points — just a plainspoken card in worn-canvas neutrals that says what it does and stops talking. The design trait is utilitarian credibility: for a brand whose identity is built on honesty about trade-offs, a consent UI that reads like gear instructions is perfectly on voice. “Essentials only” even frames refusal as the sensible, low-impact option. The compliance trait to copy here is respect for signals users have already sent: honoring Global Privacy Control and Do Not Track headers means a visitor who configured their browser to opt out never has to repeat themselves. Treating a machine-readable “no” as a real no is both a legal requirement in California and simply the decent thing to do.

Recreate this style →

What the best banners have in common

Ten brands, ten visual languages — but strip away the palettes and the same principles keep surfacing.

  • Balanced buttons, equal visual weight. Accept and reject rendered at the same size, contrast, and prominence. This is where regulator guidance is heading across the EU, and it is the single most-cited failure in enforcement actions against “nudged” consent. If one button glows and the other hides, the consent it collects is on shaky ground.
  • One-click reject. Declining should take exactly as many clicks as accepting: one. A “manage preferences” detour before the reject option appears is a dark pattern with a paper trail.
  • Placement that doesn’t hold content hostage. Corner cards and slim bars let visitors see the page they came for while they decide. Full-screen consent walls create pressure, and pressured consent is weak consent.
  • Script blocking that actually blocks. A banner is theater unless the scripts behind it genuinely wait. Real consent management holds analytics and ad tags as inert markup until the user opts in — not merely relabeling tags after they have already fired. (This is exactly how Crumb’s script blocking works: tags stay as inert text/plain until their category is consented.)
  • First-view compliance. The banner — and the blocking — must work on the very first page view, before any cached config or return visit. A consent tool that only behaves correctly from the second visit onward has already leaked data on the visit that mattered.

The pricing reality

Looking this good does not have to cost enterprise money. Typical consent platforms charge around $79/month for 30,000 visitors once you outgrow their entry tiers. Crumb’s Pro plan is $25/month for 300,000 pageviews across 10 sites — and there is a free-forever plan for a single site, so you can ship a compliant, brand-matched banner today without a credit card.

Get a banner this good in 30 seconds.

Paste your URL into the designer. Crumb’s AI reads your colours, typography, and voice — then composes three brand-matched banner options you can preview, pick, and install in one line.