Is a cookie consent banner really required?

You need consent before non-essential cookies if your site is aimed at users in the EU/EEA or UK; a banner is the usual way to get it. Strictly necessary cookies are exempt. Other places differ: for example the California CCPA/CPRA is mainly an opt-out regime (a "Do Not Sell or Share" link and honouring opt-out signals) rather than an opt-in banner, and Brazil's LGPD requires a legal basis such as consent. Check the rules that apply to your audience.

What is the difference between GDPR and ePrivacy?

The GDPR covers all processing of personal data, including data collected through cookies, and defines what valid consent is. The ePrivacy Directive (Art. 5(3)) separately requires consent before storing or accessing information on a user's device unless it is strictly necessary. For non-essential cookies you need to satisfy both.

What are "dark patterns" in cookie banners?

Dark patterns are UI designs that make it easier to accept cookies than to reject them. Examples: making the Decline button grayed out or harder to find, requiring multiple clicks to reject vs. one click to accept, or using confusing language. These can mean the consent is not "freely given" under the GDPR and has been the basis of regulator action against several sites.

Cookie Consent

Generate GDPR-compliant cookie consent banners with customizable position, layout, and color theme. Get ready-to-use HTML/CSS code for your website.

✓ Tested formula & cited sources Checked against independent sources · Oct 12, 2026 Private: runs in your browser

Site Name

Your website name — appears in the banner text

Banner Position

Choose where the cookie consent banner appears on the page

Layout Style

Default is full, Minimal is compact, Developer includes cookie settings options

Color Theme

Choose a light, dark, or custom color scheme for the banner

Results

HTML Code

<div id="cookie-consent-banner" role="dialog" aria-label="Cookie consent" style=" position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ffffff; color: #1e293b; padding: 20px 24px; border-radius: 0; border: 1px solid #cbd5e1; box-shadow: 0 10px 40px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; "> <div style="text-align: left;"> <div style="font-size: 24px; margin-bottom: 8px;" aria-hidden="true">🍪</div> <p style="margin: 0 0 4px 0; font-weight: 600; font-size: 16px; color: #1e293b;">Cookies & Privacy</p> <p style="margin: 0 0 16px 0; font-size: 13px; color: #475569;">My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic. You can accept or reject non-essential cookies.</p> <div style="display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;"> <button type="button" onclick="alert('Replace this with your cookie-settings panel')" style="background: transparent; color: #1e293b; border: 1px solid #cbd5e1; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;">Customize</button> <button type="button" onclick="localStorage.setItem('cookie_consent','rejected');document.getElementById('cookie-consent-banner').remove()" style="background: transparent; color: #1e293b; border: 1px solid #cbd5e1; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;">Reject All</button> <button type="button" onclick="localStorage.setItem('cookie_consent','accepted');document.getElementById('cookie-consent-banner').remove()" style="background: #2563eb; color: #ffffff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;">Accept All</button> </div> <div style="margin-top: 12px; font-size: 12px; color: #475569;"> <a href="#" style="color: #1d4ed8; text-decoration: underline;">Privacy Policy</a> <span style="margin: 0 6px;">·</span> <a href="#" style="color: #1d4ed8; text-decoration: underline;">Cookie Policy</a> </div> </div> </div>

CSS Code: /* Cookie Consent Banner Styles for bottom-banner position, Light theme */ .cookie-banner-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; } .cookie-consent-banner { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; z-index: 9999; } @media (max-width: 640px) { .cookie-consent-banner { left: 10px !important; right: 10px !important; max-width: none !important; transform: none !important; top: auto !important; bottom: 10px !important; } }
Full Code (HTML + CSS):  <style> /* Cookie Consent Banner Styles for bottom-banner position, Light theme */ .cookie-banner-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; } .cookie-consent-banner { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; z-index: 9999; } @media (max-width: 640px) { .cookie-consent-banner { left: 10px !important; right: 10px !important; max-width: none !important; transform: none !important; top: auto !important; bottom: 10px !important; } } </style>  <div id="cookie-consent-banner" role="dialog" aria-label="Cookie consent" style=" position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ffffff; color: #1e293b; padding: 20px 24px; border-radius: 0; border: 1px solid #cbd5e1; box-shadow: 0 10px 40px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; "> <div style="text-align: left;"> <div style="font-size: 24px; margin-bottom: 8px;" aria-hidden="true">🍪</div> <p style="margin: 0 0 4px 0; font-weight: 600; font-size: 16px; color: #1e293b;">Cookies & Privacy</p> <p style="margin: 0 0 16px 0; font-size: 13px; color: #475569;">My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic. You can accept or reject non-essential cookies.</p> <div style="display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;"> <button type="button" onclick="alert('Replace this with your cookie-settings panel')" style="background: transparent; color: #1e293b; border: 1px solid #cbd5e1; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;">Customize</button> <button type="button" onclick="localStorage.setItem('cookie_consent','rejected');document.getElementById('cookie-consent-banner').remove()" style="background: transparent; color: #1e293b; border: 1px solid #cbd5e1; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;">Reject All</button> <button type="button" onclick="localStorage.setItem('cookie_consent','accepted');document.getElementById('cookie-consent-banner').remove()" style="background: #2563eb; color: #ffffff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;">Accept All</button> </div> <div style="margin-top: 12px; font-size: 12px; color: #475569;"> <a href="#" style="color: #1d4ed8; text-decoration: underline;">Privacy Policy</a> <span style="margin: 0 6px;">·</span> <a href="#" style="color: #1d4ed8; text-decoration: underline;">Cookie Policy</a> </div> </div> </div>
Preview Description: Cookie Consent Banner for "My Website" - Position: bottom-banner - Layout: default - Description: A default cookie consent banner that appears as a bottom banner. - Offers Accept and Reject/Decline choices of equal prominence, and links to your policies. - A template only: whether your site is compliant depends on what you load, what you disclose, and local law.
Banner Position: Bottom Banner
Layout Style: Default
Color Theme: Light

The formula

GDPR (Art. 4(11), 7): valid consent must be freely given, specific, informed, and unambiguous | ePrivacy Directive Art. 5(3): consent required before storing or reading non-essential information on a device

GDPR: General Data Protection Regulation
ePrivacy: ePrivacy Directive (Cookie Law)
Essential Cookies: Strictly Necessary Cookies
Non-Essential Cookies: Non-Essential Cookies

Worked example

HTML Code =  <div id="cookie-consent-banner" role="dialog" aria-label="Cookie consent" style=" position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ffffff; color: #1e293b; padding: 20px 24px; border-radius: 0; border: 1px solid #cbd5e1; box-shadow: 0 10px 40px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; "> <div style="text-align: left;"> <div style="font-size: 24px; margin-bottom: 8px;" aria-hidden="true">🍪</div> <p style="margin: 0 0 4px 0; font-weight: 600; font-size: 16px; color: #1e293b;">Cookies & Privacy</p> <p style="margin: 0 0 16px 0; font-size: 13px; color: #475569;">My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic. You can accept or reject non-essential cookies.</p> <div style="display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;"> <button type="button" onclick="alert('Replace this with your cookie-settings panel')" style="background: transparent; color: #1e293b; border: 1px solid #cbd5e1; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;">Customize</button> <button type="button" onclick="localStorage.setItem('cookie_consent','rejected');document.getElementById('cookie-consent-banner').remove()" style="background: transparent; color: #1e293b; border: 1px solid #cbd5e1; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;">Reject All</button> <button type="button" onclick="localStorage.setItem('cookie_consent','accepted');document.getElementById('cookie-consent-banner').remove()" style="background: #2563eb; color: #ffffff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;">Accept All</button> </div> <div style="margin-top: 12px; font-size: 12px; color: #475569;"> <a href="#" style="color: #1d4ed8; text-decoration: underline;">Privacy Policy</a> <span style="margin: 0 6px;">·</span> <a href="#" style="color: #1d4ed8; text-decoration: underline;">Cookie Policy</a> </div> </div> </div>

Full explanation ↓

How Cookie Consent Works

Under the ePrivacy Directive (Art. 5(3), the "cookie law") and the GDPR, sites serving people in the EU/EEA need prior consent before setting non-essential cookies. A consent banner is the usual way to collect it. Regulators expect clear information, a way to refuse that is as easy as the way to accept, and no non-essential cookies before the user chooses. This generator produces a banner template only; it does not block your scripts or make a site compliant by itself.

GDPR: General Data Protection Regulation — EU regulation governing data protection and privacy. Requires valid consent for personal data processing, including cookie tracking.
ePrivacy: ePrivacy Directive (Cookie Law) — EU directive requiring opt-in consent for storing/accessing information on a user's device. This is the "cookie law".
Essential Cookies: Strictly Necessary Cookies — Cookies required for basic website functionality (session management, authentication). These do NOT require consent.
Non-Essential Cookies: Non-Essential Cookies — Cookies for analytics, advertising, tracking, and personalization. These generally require prior opt-in consent in the EU/EEA and UK (some jurisdictions exempt limited analytics).

Cookie consent banner — users must actively choose before non-essential cookies load

Understanding the Result

Consent is required before non-essential cookies or similar technologies are used on devices of people in the EU/EEA (ePrivacy Directive Art. 5(3), implemented nationally) and the UK (PECR). Where the data is personal data, the GDPR sets the standard for valid consent: "freely given, specific, informed, and unambiguous" (Art. 4(11)), shown by a clear affirmative act, so pre-ticked boxes and implied consent do not count (CJEU Planet49, 2019). Regulators expect refusing to be as easy as accepting.

Strictly necessary cookies (for example session or load-balancing cookies needed to deliver the service the user asked for) are exempt. GDPR infringements of the consent rules can be fined up to EUR 20 million or 4% of worldwide annual turnover, whichever is higher; penalties for breaching ePrivacy cookie rules are set by each member state.

How to Use

Enter your website name.
Choose the banner position (bottom, center modal, or corner widget).
Select a layout style (default, minimal, or developer).
Choose a color theme (light, dark, or custom).
Copy the generated HTML/CSS code and paste it into your website, then make your analytics and advertising scripts load only when localStorage cookie_consent is accepted.
The live preview updates in real time as you change settings.

Frequently Asked Questions

Is a cookie consent banner really required?: You need consent before non-essential cookies if your site is aimed at users in the EU/EEA or UK; a banner is the usual way to get it. Strictly necessary cookies are exempt. Other places differ: for example the California CCPA/CPRA is mainly an opt-out regime (a "Do Not Sell or Share" link and honouring opt-out signals) rather than an opt-in banner, and Brazil's LGPD requires a legal basis such as consent. Check the rules that apply to your audience.
What is the difference between GDPR and ePrivacy?: The GDPR covers all processing of personal data, including data collected through cookies, and defines what valid consent is. The ePrivacy Directive (Art. 5(3)) separately requires consent before storing or accessing information on a user's device unless it is strictly necessary. For non-essential cookies you need to satisfy both.
What are "dark patterns" in cookie banners?: Dark patterns are UI designs that make it easier to accept cookies than to reject them. Examples: making the Decline button grayed out or harder to find, requiring multiple clicks to reject vs. one click to accept, or using confusing language. These can mean the consent is not "freely given" under the GDPR and has been the basis of regulator action against several sites.

Common Uses

•Adding a consent banner template to European-facing websites as the front end of a consent flow
•Generating ready-to-use HTML and CSS code for cookie consent banners with different layouts, positions, and color themes
•Understanding cookie consent legal requirements under GDPR and the ePrivacy Directive to avoid regulatory fines

Limitations to Know

•This generates banner HTML/CSS only. It does not block cookies or scripts before consent, keep consent records, or provide a real preferences panel (the Customize / Cookie Settings button is a placeholder).
•Not legal advice. Compliance depends on which cookies and trackers you use, what your policies say and the law that applies to your audience.

Sources

Was this calculator helpful?

Cite this calculator

TheCalcUniverse. "Cookie Consent / Banner Generator — GDPR Cookie Notice Maker." TheCalcUniverse, 2026, https://thecalcuniverse.com/engineering/cookie-consent-banner-generator/. Accessed October 25, 2026.

Embed this calculator on your site

Free to embed. Paste this into any HTML page — it stays up to date automatically.

<iframe src="https://thecalcuniverse.com/embed/engineering/cookie-consent-banner-generator/"
  width="100%" height="620" frameborder="0" loading="lazy"
  title="Cookie Consent / Banner Generator — GDPR Cookie Notice Maker"
  style="border:none;max-width:640px;margin:0 auto;display:block;">
</iframe>
<p style="text-align:center;font-size:12px;margin:4px auto;max-width:640px;">
  Calculator by <a href="https://thecalcuniverse.com/engineering/cookie-consent-banner-generator/">Cookie Consent / Banner Generator — GDPR Cookie Notice Maker — TheCalcUniverse</a>
</p>

Open embed ↗

The formula

GDPR: General Data Protection Regulation
ePrivacy: ePrivacy Directive (Cookie Law)
Essential Cookies: Strictly Necessary Cookies
Non-Essential Cookies: Non-Essential Cookies

Worked example

Full explanation ↓

Cookie Consent

Results

The formula

How Cookie Consent Works

Understanding the Result

How to Use

Frequently Asked Questions

Common Uses

Limitations to Know

Sources

You may also like