Skip to content
TheCalcUniverse

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 Formula verified 2026-01-15 Runs in your browser — inputs never sent anywhere

See it worked out

Example — :

HTML Code

<!-- Cookie Consent Banner - Generated by TheCalcUniverse --> <div 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 #e2e8f0; 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;">🍪</div> <p style="margin: 0 0 4px 0; font-weight: 600; font-size: 16px; color: #1e293b;">Cookies &amp; Privacy</p> <p style="margin: 0 0 16px 0; font-size: 13px; color: #64748b;">My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic. By clicking "Accept All", you consent to our use of cookies.</p> <div style="display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;"> <button onclick="this.closest('[style*=\'fixed\']').remove()" style="background: transparent; color: #1e293b; border: 1px solid #e2e8f0; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;">Customize</button> <button onclick="this.closest('[style*=\'fixed\']').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: 11px; color: #94a3b8;"> <a href="#" style="color: #2563eb; text-decoration: none;">Privacy Policy</a> <span style="margin: 0 6px;">·</span> <a href="#" style="color: #2563eb; text-decoration: none;">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)

<!-- Cookie Consent Banner for My Website --> <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> <!-- Cookie Consent Banner - Generated by TheCalcUniverse --> <div 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 #e2e8f0; 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;">🍪</div> <p style="margin: 0 0 4px 0; font-weight: 600; font-size: 16px; color: #1e293b;">Cookies &amp; Privacy</p> <p style="margin: 0 0 16px 0; font-size: 13px; color: #64748b;">My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic. By clicking "Accept All", you consent to our use of cookies.</p> <div style="display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;"> <button onclick="this.closest('[style*=\'fixed\']').remove()" style="background: transparent; color: #1e293b; border: 1px solid #e2e8f0; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;">Customize</button> <button onclick="this.closest('[style*=\'fixed\']').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: 11px; color: #94a3b8;"> <a href="#" style="color: #2563eb; text-decoration: none;">Privacy Policy</a> <span style="margin: 0 6px;">·</span> <a href="#" style="color: #2563eb; text-decoration: none;">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. - Includes Accept, Decline, and Customize buttons. - GDPR-compliant with privacy policy links.

Banner Position

Bottom Banner

Layout Style

Default

Color Theme

Light

The formula

GDPR: valid consent must be freely given, specific, informed, and unambiguous | ePrivacy Directive (Cookie Law): opt-in required for non-essential cookies

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 = <!-- Cookie Consent Banner - Generated by TheCalcUniverse --> <div 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 #e2e8f0; 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;">🍪</div> <p style="margin: 0 0 4px 0; font-weight: 600; font-size: 16px; color: #1e293b;">Cookies &amp; Privacy</p> <p style="margin: 0 0 16px 0; font-size: 13px; color: #64748b;">My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic. By clicking "Accept All", you consent to our use of cookies.</p> <div style="display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;"> <button onclick="this.closest('[style*=\'fixed\']').remove()" style="background: transparent; color: #1e293b; border: 1px solid #e2e8f0; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px;">Customize</button> <button onclick="this.closest('[style*=\'fixed\']').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: 11px; color: #94a3b8;"> <a href="#" style="color: #2563eb; text-decoration: none;">Privacy Policy</a> <span style="margin: 0 6px;">·</span> <a href="#" style="color: #2563eb; text-decoration: none;">Cookie Policy</a> </div> </div> </div>

Full explanation ↓

How Cookie Consent Works

GDPR: valid consent must be freely given, specific, informed, and unambiguous | ePrivacy Directive (Cookie Law): opt-in required for non-essential cookies

Cookie consent banners are a legal requirement under the EU General Data Protection Regulation (GDPR) and the ePrivacy Directive (Cookie Law). Users must be informed about cookies AND give active consent before non-essential cookies are placed. The banner must include: a clear description of cookie usage, an Accept button, a Decline/Reject button, and a link to detailed privacy/cookie policies.

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 require explicit opt-in consent.
Cookie consent banner — users must actively choose before non-essential cookies load

How to Use

  1. Enter your website name.
  2. Choose the banner position (bottom, center modal, or corner widget).
  3. Select a layout style (default, minimal, or developer).
  4. Choose a color theme (light, dark, or custom).
  5. Copy the generated HTML/CSS code and paste it into your website.
  6. The live preview updates in real time as you change settings.

Common Uses

  • •Adding GDPR-compliant cookie consent banners to European-facing websites to meet legal privacy requirements
  • •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

Understanding the Result

Cookie consent banners are legally required for websites serving users in the European Union and European Economic Area. Under GDPR Article 7 and the ePrivacy Directive, consent must be "freely given, specific, informed, and unambiguous" — meaning pre-checked boxes and implied consent are no longer valid. The banner must allow users to both accept AND reject non-essential cookies with equal ease (no "dark patterns" like making Decline harder to find than Accept).

Essential cookies (session management, authentication, load balancing) are exempt. Analytics, advertising, tracking, and personalization cookies all require explicit opt-in. Fines for non-compliance can reach 4% of annual global revenue or EUR 20 million, whichever is greater.

Frequently Asked Questions

Is a cookie consent banner really required?
Yes, if your website serves users in the EU/EEA and uses any non-essential cookies (analytics, tracking, advertising, personalization). Essential cookies (session management, authentication) are exempt. Many countries outside the EU have similar laws (UK, Brazil LGPD, California CCPA/CPRA).
What is the difference between GDPR and ePrivacy?
GDPR covers all personal data processing, including cookies. The ePrivacy Directive (Cookie Law) specifically covers cookies and similar tracking technologies. Both apply to cookie consent. GDPR requires a legal basis (consent is one option), while ePrivacy specifically requires opt-in consent for non-essential cookies.
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 violate GDPR requirements for "freely given" consent and can result in fines.

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 July 27, 2026.

Embed this calculator on your site

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

Open embed ↗

You may also like