Generate a GDPR Cookie Consent Banner

Build a GDPR and ePrivacy ready cookie banner with self-contained HTML, CSS, and JavaScript. Paste it into any site, no third-party script needed.

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: bar, modal, or corner popup
2Configure cookie categories and descriptions
3Customize colors to match your site
4Copy the generated code into your pages

More Generate Tools

All generators →

Generate a Mock REST API Response

Create realistic fake JSON for a REST API including user lists, products, and error responses. Free online API mock response generator.

Generate a YouTube Thumbnail (1280x720)

Create a correctly sized YouTube thumbnail with a background and text overlay. Free online YouTube thumbnail maker, exports PNG with no watermark.

Generate an Instagram Post Image (1080x1080)

Create a correctly sized 1080x1080 Instagram post with text overlay. Free online Instagram post image maker that exports PNG, no signup.

CSS Border Radius Generator Online

Generate CSS border-radius values visually with rounded corners and live preview. Free border radius generator, copy the CSS in one click.

CSS Clip Path Generator for Custom Shapes

Create CSS clip-path shapes visually - hexagon, triangle, star, and custom polygons. Free clip-path generator with copy-ready CSS, no signup.

CSS Keyframe Animation Generator

Generate CSS keyframe animations visually - fade in, slide, bounce, and spin. Free @keyframes generator with live preview, copy the CSS instantly.

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