Is a cookie consent banner required by GDPR?

Yes. Under the EU General Data Protection Regulation (GDPR) and the ePrivacy Directive, websites must obtain freely given, specific, informed, and unambiguous consent before setting non-essential cookies (analytics, marketing, personalization). Necessary cookies that are strictly required for the site to function are exempt. The consent must be obtained before cookies are set — not after.

What are cookie categories?

Cookie categories group cookies by purpose: (1) Necessary — essential for the website to function (session cookies, security tokens), always allowed; (2) Functional — remember user preferences (language, region, dark mode); (3) Analytics — measure site usage and performance (Google Analytics, Hotjar); (4) Marketing — track users across sites to show targeted ads (Google Ads, Facebook Pixel). Under GDPR, users must be able to accept or reject each non-necessary category individually.

What is the difference between GDPR and CCPA for cookie consent?

GDPR (EU) requires opt-in consent — you must not set non-essential cookies until the user actively accepts them. CCPA (California) uses an opt-out model — you can set cookies but must provide a 'Do Not Sell My Personal Information' link and honor opt-out requests. If your site serves both EU and California users, you should implement both: require opt-in by default (GDPR) and include a CCPA opt-out notice.

How do I embed the generated cookie consent banner?

Copy the generated HTML+CSS+JS snippet and paste it just before the closing tag in your HTML. The banner will automatically appear for new visitors and remember their choice in localStorage for the configured number of days. To check consent from JavaScript, listen to the 'cookieConsentUpdated' custom event or read the 'ccb_consent' key from localStorage.

Can I auto-dismiss the cookie banner?

The generator supports an auto-dismiss option that hides the banner after a configurable delay (applying Reject All). However, under GDPR, auto-dismissal generally does not constitute valid consent — silence or inaction is not consent. Auto-dismiss is best suited for informational notices under CCPA or for regions with looser regulations.

Is the generated code safe to use on my website?

Yes. The generated snippet is self-contained vanilla HTML, CSS, and JavaScript with no external dependencies. It stores consent in localStorage (not cookies), dispatches a custom DOM event for integration with other scripts, and does not make any network requests. All user input is HTML-escaped to prevent XSS.

Cookie Consent Banner Generator

Build GDPR & CCPA-compliant cookie consent banners with embeddable HTML+CSS+JS

All processing happens in your browser. No data is sent to any server.

Position & Compliance

Banner Position

Compliance Mode

Remember Consent (days)

Auto-dismiss banner

Automatically dismiss the banner after a set delay (applies Reject All). Not recommended for GDPR.

Colors

Background

Text

Accept Button

Accept Button Text

Reject Button

Reject Button Text

Text Content

Banner Message

Accept All Button Label

Reject Button Label

Customize Button Label

Save Preferences Button Label

Cookie Categories

Toggle which categories are enabled by default in the preferences modal. Necessary cookies are always on and cannot be disabled.

NecessaryRequired

These cookies are required for the website to function and cannot be disabled.

Functional

These cookies allow the website to remember choices you make.

Analytics

These cookies help us understand how visitors interact with our website.

Marketing

These cookies are used to deliver personalized advertisements.

Generated Snippet

Paste this HTML+CSS+JS snippet just before the </body> tag.

<!-- Cookie Consent Banner — generated by PureDevTools (puredevtools.tools/cookie-consent-generator) -->
<div id="cookie-consent-banner" role="dialog" aria-label="Cookie consent" aria-live="polite">
  <div class="ccb-container">
    <div class="ccb-text">
      <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking &quot;Accept All&quot;, you consent to our use of cookies. <a href="/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a></p>
    </div>
    <div class="ccb-buttons">
      <button id="ccb-btn-accept" class="ccb-btn ccb-btn-accept" aria-label="Accept All">Accept All</button>
      <button id="ccb-btn-reject" class="ccb-btn ccb-btn-reject" aria-label="Reject All">Reject All</button>
      <button id="ccb-btn-customize" class="ccb-btn ccb-btn-customize" aria-label="Customize">Customize</button>
    </div>
  </div>
</div>

<!-- Cookie Preferences Modal -->
<div id="ccb-customize-modal" role="dialog" aria-label="Cookie preferences" aria-modal="true">
  <div class="ccb-modal-inner">
    <h2 class="ccb-modal-title">Cookie Preferences</h2>
  <div class="ccb-category">
    <div class="ccb-category-header">
      <span class="ccb-category-name">Necessary (Required)</span>
      <label class="ccb-toggle" aria-label="Toggle Necessary cookies">
        <input type="checkbox" id="ccb-cat-necessary" checked disabled />
        <span class="ccb-toggle-slider"></span>
      </label>
    </div>
    <p class="ccb-category-desc">These cookies are required for the website to function and cannot be disabled.</p>
  </div>
  <div class="ccb-category">
    <div class="ccb-category-header">
      <span class="ccb-category-name">Functional</span>
      <label class="ccb-toggle" aria-label="Toggle Functional cookies">
        <input type="checkbox" id="ccb-cat-functional" checked />
        <span class="ccb-toggle-slider"></span>
      </label>
    </div>
    <p class="ccb-category-desc">These cookies allow the website to remember choices you make.</p>
  </div>
  <div class="ccb-category">
    <div class="ccb-category-header">
      <span class="ccb-category-name">Analytics</span>
      <label class="ccb-toggle" aria-label="Toggle Analytics cookies">
        <input type="checkbox" id="ccb-cat-analytics" />
        <span class="ccb-toggle-slider"></span>
      </label>
    </div>
    <p class="ccb-category-desc">These cookies help us understand how visitors interact with our website.</p>
  </div>
  <div class="ccb-category">
    <div class="ccb-category-header">
      <span class="ccb-category-name">Marketing</span>
      <label class="ccb-toggle" aria-label="Toggle Marketing cookies">
        <input type="checkbox" id="ccb-cat-marketing" />
        <span class="ccb-toggle-slider"></span>
      </label>
    </div>
    <p class="ccb-category-desc">These cookies are used to deliver personalized advertisements.</p>
  </div>
    <div class="ccb-modal-footer">
      <button id="ccb-modal-close" class="ccb-btn ccb-btn-reject">Cancel</button>
      <button id="ccb-btn-save" class="ccb-btn ccb-btn-accept">Save Preferences</button>
    </div>
  </div>
</div>

<style>
/* Cookie Consent Banner — generated by PureDevTools */
#cookie-consent-banner {
  background-color: #1a1a2e;
  color: #e0e0e0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}
#cookie-consent-banner.ccb-visible {
  display: block;
}
.ccb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ccb-text {
  flex: 1;
  min-width: 200px;
}
.ccb-text a {
  color: #4caf50;
  text-decoration: underline;
}
.ccb-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ccb-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.ccb-btn:hover {
  opacity: 0.85;
}
.ccb-btn-accept {
  background-color: #4caf50;
  color: #ffffff;
}
.ccb-btn-reject {
  background-color: #555555;
  color: #ffffff;
}
.ccb-btn-customize {
  background-color: transparent;
  color: #e0e0e0;
  border: 1px solid #e0e0e0;
}
/* Preferences modal */
#ccb-customize-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}
#ccb-customize-modal.ccb-visible {
  display: flex;
}
.ccb-modal-inner {
  background: #1a1a2e;
  color: #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}
.ccb-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.ccb-category {
  border: 1px solid rgba(128,128,128,0.3);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.ccb-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ccb-category-name {
  font-weight: 600;
  font-size: 14px;
}
.ccb-category-desc {
  font-size: 12px;
  opacity: 0.75;
  margin: 0;
}
.ccb-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.ccb-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ccb-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(128,128,128,0.4);
  border-radius: 22px;
  transition: 0.3s;
}
.ccb-toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}
.ccb-toggle input:checked + .ccb-toggle-slider {
  background-color: #4caf50;
}
.ccb-toggle input:checked + .ccb-toggle-slider::before {
  transform: translateX(18px);
}
.ccb-toggle input:disabled + .ccb-toggle-slider {
  cursor: not-allowed;
  opacity: 0.6;
}
.ccb-modal-footer {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>

<script>
(function () {
  'use strict';

  var STORAGE_KEY = 'ccb_consent';
  var EXPIRY_KEY = 'ccb_consent_expiry';
  var REMEMBER_MS = 365 * 24 * 60 * 60 * 1000;

  function getConsent() {
    try {
      var expiry = localStorage.getItem(EXPIRY_KEY);
      if (expiry && Date.now() > parseInt(expiry, 10)) {
        localStorage.removeItem(STORAGE_KEY);
        localStorage.removeItem(EXPIRY_KEY);
        return null;
      }
      var raw = localStorage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw) : null;
    } catch (e) { return null; }
  }

  function saveConsent(consent) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
      localStorage.setItem(EXPIRY_KEY, String(Date.now() + REMEMBER_MS));
    } catch (e) {}
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.classList.remove('ccb-visible');
    var modal = document.getElementById('ccb-customize-modal');
    if (modal) modal.classList.remove('ccb-visible');
  }

  function fireEvent(consent) {
    try {
      document.dispatchEvent(new CustomEvent('cookieConsentUpdated', { detail: consent }));
    } catch (e) {}
  }

  function acceptAll() {
    var consent = { necessary: true, 'analytics': true, 'marketing': true, 'functional': true };
    saveConsent(consent);
    hideBanner();
    fireEvent(consent);
  }

  function rejectAll() {
    var consent = { necessary: true, 'analytics': false, 'marketing': false, 'functional': false };
    saveConsent(consent);
    hideBanner();
    fireEvent(consent);
  }

  function savePreferences() {
    var consent = { necessary: true };
    var rdAnalytics = document.getElementById('ccb-cat-analytics'); consent['analytics'] = rdAnalytics ? rdAnalytics.checked : false;
    var rdMarketing = document.getElementById('ccb-cat-marketing'); consent['marketing'] = rdMarketing ? rdMarketing.checked : false;
    var rdFunctional = document.getElementById('ccb-cat-functional'); consent['functional'] = rdFunctional ? rdFunctional.checked : false;
    saveConsent(consent);
    hideBanner();
    fireEvent(consent);
  }

  function showCustomize() {
    var modal = document.getElementById('ccb-customize-modal');
    if (modal) modal.classList.add('ccb-visible');
    var existing = getConsent();
    var cbAnalytics = document.getElementById('ccb-cat-analytics'); if (cbAnalytics) cbAnalytics.checked = existing ? !!existing['analytics'] : false;
    var cbMarketing = document.getElementById('ccb-cat-marketing'); if (cbMarketing) cbMarketing.checked = existing ? !!existing['marketing'] : false;
    var cbFunctional = document.getElementById('ccb-cat-functional'); if (cbFunctional) cbFunctional.checked = existing ? !!existing['functional'] : true;
  }

  function init() {
    if (getConsent()) return;

    var banner = document.getElementById('cookie-consent-banner');
    if (!banner) return;
    banner.classList.add('ccb-visible');

    var elAccept = document.getElementById('ccb-btn-accept');
    var elReject = document.getElementById('ccb-btn-reject');
    var elCustomize = document.getElementById('ccb-btn-customize');
    var elSave = document.getElementById('ccb-btn-save');
    var elClose = document.getElementById('ccb-modal-close');
    var modal = document.getElementById('ccb-customize-modal');

    if (elAccept) elAccept.addEventListener('click', acceptAll);
    if (elReject) elReject.addEventListener('click', rejectAll);
    if (elCustomize) elCustomize.addEventListener('click', showCustomize);
    if (elSave) elSave.addEventListener('click', savePreferences);
    if (elClose) elClose.addEventListener('click', function () {
      if (modal) modal.classList.remove('ccb-visible');
    });
    if (modal) {
      modal.addEventListener('click', function (e) {
        if (e.target === modal) modal.classList.remove('ccb-visible');
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
}());
</script>

You just launched a side project and realized you need a cookie banner for GDPR compliance. Your options: pay $9/month for a SaaS consent platform, spend a day building one from scratch, or paste some random snippet from Stack Overflow and hope it’s actually compliant. None of those are great when you just want a working banner that matches your site’s colors and handles the legal basics correctly.

Why This Generator (Not CookieBot, Osano, or DIY)

CookieBot, OneTrust, and Osano charge $10-40/month for hosted consent management. That makes sense for enterprise sites tracking consent across millions of users. For a personal project, portfolio, or small business site, a self-hosted banner is simpler, cheaper, and eliminates a third-party dependency.

The problem with DIY is getting the compliance details right: GDPR requires opt-in before cookies fire, CCPA requires an opt-out mechanism, and both need a way for users to change their mind later. This generator handles those requirements — it produces a self-contained HTML/CSS/JS snippet with category-based consent, localStorage persistence, and a cookieConsentUpdated event your analytics scripts can listen to. No external dependencies, no monthly fee, no third-party server receiving your visitors’ consent data.

A cookie consent banner (also called a cookie notice, cookie popup, or cookie bar) is a user interface element that informs website visitors about the use of cookies and requests their consent before non-essential cookies are set. Cookie consent banners are required by privacy laws such as the EU’s GDPR (General Data Protection Regulation), the ePrivacy Directive, and are strongly recommended under California’s CCPA (California Consumer Privacy Act).

Without a consent mechanism, websites that use analytics, advertising, or personalization cookies may be in violation of applicable privacy law — with potential fines of up to €20 million or 4% of global annual turnover under GDPR.

How to Use This Tool

Choose a position — select bottom bar, top bar, bottom-left popup, or bottom-right popup.
Set compliance mode — GDPR (opt-in, EU), CCPA (opt-out, California), or both.
Add your privacy policy URL — required for GDPR compliance; linked from the banner message.
Customize colors — set background, text, accept button, and reject button colors using the color pickers.
Edit text content — write your own banner message and button labels.
Configure categories — choose which cookie categories (Analytics, Marketing, Functional) are enabled by default in the preferences modal.
Set consent duration — how many days to remember the user’s choice (365 days is standard).
Copy the snippet — paste the HTML+CSS+JS output just before the </body> tag on every page.

All processing happens entirely in your browser. No data is sent to any server.

Necessary Cookies

Strictly required for the website to function. Session management, security tokens (CSRF), load balancing, and authentication cookies fall into this category. These cannot be turned off and do not require consent under GDPR — they are exempt from the opt-in requirement because the site cannot function without them.

Functional Cookies

Remember user preferences and choices to improve the experience. Examples include language selection, region, dark/light mode preference, and video player settings. These require consent under GDPR but are generally considered low-risk.

Analytics Cookies

Measure how visitors use the website. Examples include Google Analytics, Hotjar, and Mixpanel. These cookies collect anonymized data about page views, session duration, bounce rate, and user journeys. Analytics cookies require opt-in consent under GDPR.

Marketing Cookies

Track users across websites to serve targeted advertisements. Examples include Google Ads, Facebook Pixel, and LinkedIn Insight Tag. These are the most privacy-sensitive category and require explicit opt-in consent under GDPR.

Requirement	GDPR (EU)	CCPA (California)
Consent model	Opt-in — cookies off until consent	Opt-out — cookies on by default
Pre-ticked boxes	Not allowed	Allowed
Silence = consent?	No — must be an active choice	Yes (unless user opts out)
Required notice	Yes — before cookies are set	Yes — at time of data collection
”Do Not Sell” link	Not required	Required if selling personal data
Consent record	Must be kept	Recommended
Age limit	16 years (or lower per member state)	13 years (COPPA also applies)

If your website serves users from both the EU and California, implement the stricter GDPR model globally: require opt-in by default, and add the CCPA opt-out notice.

The generated snippet is a self-contained block of HTML, CSS, and JavaScript. To deploy it:

Paste just before </body> on every page of your website. Most CMS platforms have a “footer code” or “body end” injection field in settings.
Block cookies until consent — the snippet itself does not block analytics or marketing scripts. You must load those scripts conditionally. Listen to the cookieConsentUpdated custom DOM event:

document.addEventListener('cookieConsentUpdated', function(e) {
  var consent = e.detail;
  if (consent.analytics) {
    // Load Google Analytics / Hotjar
  }
  if (consent.marketing) {
    // Load Facebook Pixel / Google Ads
  }
});

Check existing consent on page load — to avoid loading tracking scripts before consent is confirmed:

var consent = JSON.parse(localStorage.getItem('ccb_consent') || 'null');
if (consent && consent.analytics) {
  // Load analytics
}

The generated banner stores consent in localStorage (not cookies) under the key ccb_consent. The expiry is stored under ccb_consent_expiry as a Unix timestamp in milliseconds.

Reading consent: JSON.parse(localStorage.getItem('ccb_consent')) returns an object like { necessary: true, analytics: true, marketing: false, functional: true } or null if no consent was recorded.
Expiry: After the configured number of days, the stored consent is cleared and the banner will reappear.
Events: Each user action fires a cookieConsentUpdated CustomEvent on document with event.detail set to the consent object.

A compliant GDPR cookie consent implementation requires:

Banner appears before any non-essential cookies are set
No pre-ticked checkboxes for optional categories
Rejecting is as easy as accepting (Reject All button is equally prominent)
Users can change their mind at any time (provide a “Cookie Preferences” link in your footer)
Banner includes a link to your Privacy Policy
Record of consent is kept (timestamp, categories accepted, IP anonymized if possible)
Consent is time-limited (re-ask after 12 months is standard practice)
No dark patterns — do not make rejecting harder than accepting

Frequently Asked Questions

Does a cookie consent banner also cover GDPR tracking consent? Yes, if properly implemented. GDPR consent for cookies and tracking pixels (Google Analytics, Facebook Pixel) must be obtained before those scripts execute. Use the cookieConsentUpdated event or read localStorage at page load to conditionally load tracking scripts.

Do I need a cookie consent banner for a static site with no tracking? If your site only uses strictly necessary cookies (session cookies, CSRF tokens) and no third-party analytics or advertising scripts, you may not need a consent banner. However, if you embed YouTube videos, use Google Analytics, or include any social sharing widgets, those may set cookies and require consent.

How do I update the banner after deployment? Simply regenerate the snippet with your updated settings and replace the old snippet in your HTML. Since consent is stored in localStorage, existing users will keep their consent until it expires.

Is localStorage consent storage GDPR-compliant? Yes. GDPR and the ePrivacy Directive regulate “cookies and similar tracking technologies” — but the storage mechanism for the consent record itself is not covered. Storing the consent record in localStorage is a common and accepted practice, and is often preferable to using a cookie for the consent record (which would itself require consent).

CSP Generator

Build Content-Security-Policy headers with a visual directive builder

Meta Tag Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards

More Code & Config Generators

package.json Generator npm Scripts Visualizer tsconfig.json Generator ESLint Config Generator ESLint Rule Tester Prettier Config Generator View all →

Cookie Consent Banner Generator

Position & Compliance

Colors

Text Content

Cookie Categories

Why This Generator (Not CookieBot, Osano, or DIY)

How to Use This Tool

Necessary Cookies

Functional Cookies

Analytics Cookies

Marketing Cookies

Embedding the Banner

Frequently Asked Questions

Related Tools

More Code & Config Generators

Cookie Consent Banner Generator

Position & Compliance

Colors

Text Content

Cookie Categories

Why This Generator (Not CookieBot, Osano, or DIY)

What Is a Cookie Consent Banner?

How to Use This Tool

Understanding Cookie Categories

Necessary Cookies

Functional Cookies

Analytics Cookies

Marketing Cookies

GDPR vs CCPA: Key Differences

Embedding the Banner

Consent Storage

GDPR Compliance Checklist

Frequently Asked Questions

Related Tools

More Code & Config Generators