10 Best Cookie Banner Examples (2026)
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
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
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
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
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
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
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
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
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
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
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/plainuntil 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.