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 below

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>

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

Scenario Comparison

Conservative (5%)

$16,470.09

$6,470.09 interest

Your scenario (7%)

$20,096.61

$10,096.61 interest

Aggressive (10%)

$27,070.41

$17,070.41 interest

High-risk (14%)

$40,224.71

$30,224.71 interest

Best return

Share your result

Continue with

URL Encode Base64 Encoder / Decoder Password Gen

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

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

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

With your numbers

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>