Cookie Consent / Banner Generator â€” GDPR Cookie Notice Maker

Name: Cookie Consent / Banner Generator â€” GDPR Cookie Notice Maker
Rating: 4.8 (1250 reviews)
Author: TheCalcUniverse

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

✓ Formula verified: January 2026

⚡

Cookie Consent

Results update instantly as you type

Enter Values

HTML Code

<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 & 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>

↑ Neutral

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; } }

Preview DescriptionCookie 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 PositionBottom Banner

Layout StyleDefault

Color Theme

Light

http://127.0.0.1:54963/engineering/cookie-consent-banner-generator

Live Cookie Banner Preview

Browser Preview

🍪

Cookies & Privacy

My Website uses cookies to enhance your browsing experience, serve personalized content, and analyze traffic.

CustomizeAccept All

Generated Code

<!-- 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 !impor
... (truncated)

Position

Bottom Banner

Layout

Default

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

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.

Variable Definitions

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

Cookies for analytics, advertising, tracking, and personalization. These require explicit opt-in consent.

How to Use This Calculator

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 Applications

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

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

Understanding the Concept

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

Sources & References

Cookie Consent Cookie Consent Under GDPR

Related Calculators

Reviews

No reviews yet. Be the first to share your experience with Cookie Consent / Banner Generator â€” GDPR Cookie Notice Maker.

Write a Review