Cookie Consent Generator

Generate cookie consent banners and compliance code

Banner Position

Color Theme

Background

Text

Button

Button Text

Border Radius12px

Banner Text

Title

Description

Accept All

Selected

Reject All

Cookie Categories

Necessary(Always included)

Essential cookies required for the website to function properly

Functional

Cookies that enable enhanced functionality like live chat, videos, and personalization

Analytics

Cookies that help us understand how visitors interact with our website

Marketing

Cookies used for advertising, retargeting, and tracking across websites

Preferences

Cookies that remember your settings like language and region

Social Media

Cookies set by social media platforms for sharing and embedded content

Compliance

Regulation

GDPRePrivacy Directive

Cookie Expiry (days)

Reopen button

Live Preview

Website content preview

Cookie Settings

We use cookies to enhance your browsing experience, serve personalized content, ...

🍪

Click "Customize" in the preview to toggle the preference center

Generated Code

<!-- Cookie Consent Banner -->
<div id="cookie-consent-banner" class="cookie-consent-banner">
  <div class="cookie-consent-content">
    <div class="cookie-consent-header">
      <h3>Cookie Settings</h3>
      <p>We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. Please select your cookie preferences below.</p>
    </div>
    <div class="cookie-consent-categories">
    <div class="cookie-consent-category">
      <input type="checkbox" id="cc-necessary" data-category="necessary" checked disabled />
      <label for="cc-necessary">
        <strong>Necessary (Required)</strong>
        <span>Essential cookies required for the website to function properly</span>
      </label>
    </div>
    <div class="cookie-consent-category">
      <input type="checkbox" id="cc-functional" data-category="functional" />
      <label for="cc-functional">
        <strong>Functional</strong>
        <span>Cookies that enable enhanced functionality like live chat, videos, and personalization</span>
      </label>
    </div>
    <div class="cookie-consent-category">
      <input type="checkbox" id="cc-analytics" data-category="analytics" />
      <label for="cc-analytics">
        <strong>Analytics</strong>
        <span>Cookies that help us understand how visitors interact with our website</span>
      </label>
    </div>
    </div>
    <div class="cookie-consent-actions">
      <button onclick="acceptAllCookies()" class="cookie-consent-btn cookie-consent-btn-accept">Accept All</button>
      <button onclick="acceptSelectedCookies()" class="cookie-consent-btn cookie-consent-btn-selected">Accept Selected</button>
      <button onclick="rejectCookies()" class="cookie-consent-btn cookie-consent-btn-reject">Reject All</button>
    </div>
  </div>
</div>
<button id="cookie-consent-reopen" class="cookie-consent-reopen" onclick="reopenCookieBanner()" aria-label="Cookie settings" title="Cookie settings">🍪</button>

<style>
.cookie-consent-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;display:none;}
.cookie-consent-content{background:#1f2937;color:#f9fafb;padding:24px;box-shadow:0 -2px 20px rgba(0,0,0,0.15);}
.cookie-consent-header h3{margin:0;font-size:18px;font-weight:700;}
.cookie-consent-header p{margin:8px 0 0;font-size:14px;opacity:0.85;line-height:1.5;}
.cookie-consent-categories{margin:16px 0;font-size:13px;}
.cookie-consent-category{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f9fafb15;}
.cookie-consent-category:last-child{border-bottom:none;}
.cookie-consent-category input[type="checkbox"]{margin-top:3px;accent-color:#6366f1;width:16px;height:16px;cursor:pointer;}
.cookie-consent-category label{cursor:pointer;flex:1;}
.cookie-consent-category strong{display:block;font-size:13px;}
.cookie-consent-category span{display:block;font-size:12px;opacity:0.7;margin-top:2px;}
.cookie-consent-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.cookie-consent-btn{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:opacity 0.2s;}
.cookie-consent-btn:hover{opacity:0.88;}
.cookie-consent-btn-accept{background:#6366f1;color:#ffffff;}
.cookie-consent-btn-selected{background:transparent;color:#f9fafb;border:1px solid #f9fafb40;}
.cookie-consent-btn-reject{background:transparent;color:#f9fafb;opacity:0.7;}
.cookie-consent-footer{margin-top:12px;font-size:12px;opacity:0.6;}
.cookie-consent-footer a{color:#f9fafb;text-decoration:underline;}
.cookie-consent-reopen{position:fixed;bottom:16px;right:16px;z-index:9998;background:#1f2937;color:#f9fafb;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;display:none;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.2);transition:transform 0.2s;}
.cookie-consent-reopen:hover{transform:scale(1.1);}
</style>

<script>
(function() {
  'use strict';
  var COOKIE_NAME = 'cookie_consent';
  var COOKIE_DAYS = 365;
  var CATEGORIES = ['necessary', 'functional', 'analytics'];
  var GDPR_COMPLIANT = true;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax;Secure';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
    var reopen = document.getElementById('cookie-consent-reopen');
    if (reopen) reopen.style.display = 'none';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
    var reopen = document.getElementById('cookie-consent-reopen');
    if (reopen) reopen.style.display = 'flex';
  }

  function saveConsent(consent) {
    var data = {
      consent: consent,
      timestamp: new Date().toISOString(),
      version: '1.0'
    };
    setCookie(COOKIE_NAME, JSON.stringify(data), COOKIE_DAYS);
    hideBanner();
    onConsentUpdate(consent);
  }

  window.acceptAllCookies = function() {
    var consent = {};
    CATEGORIES.forEach(function(cat) { consent[cat] = true; });
    saveConsent(consent);
  };

  window.acceptSelectedCookies = function() {
    var consent = { necessary: true };
    var checkboxes = document.querySelectorAll('#cookie-consent-banner input[data-category]');
    checkboxes.forEach(function(cb) {
      consent[cb.getAttribute('data-category')] = cb.checked;
    });
    saveConsent(consent);
  };

  window.rejectCookies = function() {
    var consent = { necessary: true };
    CATEGORIES.forEach(function(cat) {
      if (cat !== 'necessary') consent[cat] = false;
    });
    saveConsent(consent);
  };

  window.dismissCookieBanner = function() {
    hideBanner();
  };

  window.reopenCookieBanner = function() {
    // Restore checkbox states from saved consent
    var existing = getCookie(COOKIE_NAME);
    if (existing) {
      try {
        var data = JSON.parse(existing);
        var consent = data.consent || data;
        var checkboxes = document.querySelectorAll('#cookie-consent-banner input[data-category]');
        checkboxes.forEach(function(cb) {
          var cat = cb.getAttribute('data-category');
          if (cat !== 'necessary') cb.checked = !!consent[cat];
        });
      } catch(e) {}
    }
    showBanner();
  };

  function onConsentUpdate(consent) {
    window.dispatchEvent(new CustomEvent('cookieConsentUpdate', { detail: consent }));
    if (typeof GDPR_COMPLIANT !== 'undefined') {
      console.log('[Cookie Consent] GDPR-compliant consent recorded:', consent);
    }
  }

  // Check for existing consent on page load
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    showBanner();
  } else {
    var reopen = document.getElementById('cookie-consent-reopen');
    if (reopen) reopen.style.display = 'flex';
  }
})();
</script>

Compliance Notes

GDPR Requirements

Prior consent required before setting non-essential cookies
Users must be able to withdraw consent at any time
Consent must be freely given, specific, informed, and unambiguous
Pre-ticked checkboxes are not valid consent
Consent records should be stored for audit purposes

Share to Community

Was this tool helpful?

What is Cookie Consent Generator?

Free online cookie consent generator to generate GDPR and ePrivacy-compliant cookie consent banners for your website.

Choose from multiple banner styles (bottom bar, modal, corner popup), configure cookie categories (necessary, analytics, marketing), and get ready-to-use HTML, CSS, and JavaScript code. The generated banner handles consent storage and respects user choices. No signup required.

How to Use Cookie Consent Generator

1Choose a banner style (bar, modal, or corner popup)
2Configure cookie categories and descriptions
3Customize colors to match your website design
4Copy the HTML/CSS/JS code and add it to your site

Frequently Asked Questions

If your website uses cookies and serves users in the EU (GDPR) or California (CCPA), you likely need a cookie consent mechanism. Even outside these regions, it's considered best practice.

Necessary (always active), Analytics (Google Analytics, etc.), Marketing (ad tracking), and Preferences (language, theme). Users can accept all, reject non-essential, or customize their choices.

The generated code stores consent in a cookie itself (ironic but standard). It checks for existing consent on each page load and only fires tracking scripts after the user accepts the relevant category.

Share this tool

Related Tools

|||

Barcode Generator

Free online barcode generator - generate Code 128 barcodes from any text instantly

QR Code Generator

QR code generator free - create QR codes from URLs or text with no watermark, no signup required

🛡️

Privacy Policy Generator

Free online privacy policy generator - generate GDPR-compliant privacy policies for websites

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

Email Signature Generator

Free online email signature generator - create professional HTML email signatures with live preview

UUID Generator

Free online UUID generator - generate unique UUIDs (v4) for your applications