Generate a Cookie Consent Banner Online

Build a cookie consent banner with the HTML, CSS, and JavaScript code ready to paste into your site. Customize colors, text, and behavior to match your brand.

Generator

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" role="region" aria-label="Cookie consent" aria-labelledby="cookie-consent-title">
  <div class="cookie-consent-content">
    <div class="cookie-consent-header">
      <h3 id="cookie-consent-title">Cookie Settings</h3>
      <p id="cookie-consent-desc">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" role="group" aria-label="Cookie preferences">
    <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 type="button" onclick="acceptAllCookies()" class="cookie-consent-btn cookie-consent-btn-accept">Accept All</button>
      <button type="button" onclick="acceptSelectedCookies()" class="cookie-consent-btn cookie-consent-btn-selected">Accept Selected</button>
      <button type="button" onclick="rejectCookies()" class="cookie-consent-btn cookie-consent-btn-reject">Reject All</button>
    </div>
  </div>
</div>
<button type="button" id="cookie-consent-reopen" class="cookie-consent-reopen" onclick="reopenCookieBanner()" aria-label="Open 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-link{background:none;border:none;padding:0;font:inherit;color:#f9fafb;text-decoration:underline;cursor:pointer;}
.cookie-consent-btn:focus-visible,.cookie-consent-link:focus-visible,.cookie-consent-category input:focus-visible,.cookie-consent-reopen:focus-visible{outline:2px solid #6366f1;outline-offset:2px;}
.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';
  }

  var lastFocused = null;

  function getFocusable(banner) {
    return Array.prototype.slice.call(
      banner.querySelectorAll('button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])')
    );
  }

  function trapFocus(e) {
    var banner = document.getElementById('cookie-consent-banner');
    if (!banner || banner.style.display === 'none') return;
    if (e.key === 'Tab') {
      var f = getFocusable(banner);
      if (!f.length) return;
      var first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (!banner) return;
    lastFocused = document.activeElement;
    banner.style.display = 'block';
    var reopen = document.getElementById('cookie-consent-reopen');
    if (reopen) reopen.style.display = 'none';
    // Move focus into the banner for keyboard/screen-reader users.
    var focusable = getFocusable(banner);
    if (focusable.length) focusable[0].focus();
  }

  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';
    // Restore focus to where it was before the banner opened.
    if (lastFocused && typeof lastFocused.focus === 'function') {
      lastFocused.focus();
      lastFocused = null;
    }
  }

  function saveConsent(consent) {
    var data = {
      consent: consent,
      timestamp: new Date().toISOString(),
      version: '1.0'
    };
    var serialized = JSON.stringify(data);
    setCookie(COOKIE_NAME, serialized, COOKIE_DAYS);
    // Also store a consent record in localStorage for audit/retrieval.
    try { localStorage.setItem(COOKIE_NAME, serialized); } catch (e) {}
    hideBanner();
    onConsentUpdate(consent);
  }

  function getStoredConsent() {
    var raw = getCookie(COOKIE_NAME);
    if (!raw) { try { raw = localStorage.getItem(COOKIE_NAME); } catch (e) {} }
    if (!raw) return null;
    try {
      var data = JSON.parse(raw);
      return data && data.consent ? data.consent : data;
    } catch (e) { return null; }
  }

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

  function syncCheckboxes() {
    var consent = getStoredConsent();
    if (!consent) return;
    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];
    });
  }

  window.reopenCookieBanner = function() {
    syncCheckboxes();
    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);
    }
  }

  // Public API: query consent and register callbacks from your own code.
  window.CookieConsent = {
    getConsent: getStoredConsent,
    hasConsent: function(category) {
      var c = getStoredConsent();
      return !!(c && c[category]);
    },
    show: function() { syncCheckboxes(); showBanner(); },
    acceptAll: function() { window.acceptAllCookies(); },
    reject: function() { window.rejectCookies(); },
    onUpdate: function(cb) {
      window.addEventListener('cookieConsentUpdate', function(e) { cb(e.detail); });
    }
  };

  function init() {
    // Check for existing consent on page load.
    var existing = getStoredConsent();
    if (!existing) {
      showBanner();
    } else {
      var reopen = document.getElementById('cookie-consent-reopen');
      if (reopen) reopen.style.display = 'flex';
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</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

Quick Start

1Choose a banner style and position
2Customize the message and button text
3Set cookie categories and preferences
4Copy the generated HTML/CSS/JS code

More Generate Tools

All generators →

Generate Placeholder Photos Online

Generate random placeholder photos from Unsplash for mockups and designs. Free online Lorem Picsum image generator.

Generate Mock API Responses Online

Create mock API responses for testing and development. Free online API mock response generator with JSON templates.

Generate Social Media Posts Online

Create correctly sized images and text for social media platforms. Free online social media post generator.

Generate Random Names Online

Generate realistic random names for testing, mockups, and creative projects. Free online name generator.

Generate .htaccess Rules Online

Generate Apache .htaccess redirect and rewrite rules. Free online htaccess generator for web servers.

Generate an XML Sitemap Online

Create XML sitemaps from a list of URLs for search engine submission. Free online sitemap generator.

Looking for FAQs and advanced options? Visit the full Cookie Consent Generator page →