Does this generator make my site GDPR compliant on its own?

The banner gives the visitor a clear opt-in or opt-out choice and stores their preference, which covers the consent UI requirement. You still need a privacy policy page and you must actually block scripts in the categories they reject.

How do I block Google Analytics until consent is given?

Two ways. The simplest is to tick the Google Consent Mode v2 box: the generated script then emits gtag consent signals, starting denied and switching to granted only after the visitor accepts the matching category. Otherwise, gate the gtag tag yourself behind an if-check that reads the cookie the banner sets, so the script is never inserted until consent is given.

Can I change the wording after I have already deployed the banner?

Yes. Re-open the generator with similar settings, regenerate, and replace the strings inside the banner div. Existing visitors keep their previous consent because the cookie name does not change.

What is the difference between opt-in and opt-out mode?

Opt-in starts with all non-essential categories disabled and only activates them after the user accepts. Opt-out starts with them enabled, which is allowed under CCPA but not under GDPR. Pick opt-in if any of your visitors are in the EU.

Will the banner show up again every time someone visits?

No. Once a visitor saves a choice, the cookie lasts as long as the expiry you set (six months by default). The banner only reappears after that, or if the cookie is cleared, or if you bump the consent version inside the JS file.

Cookie Consent Generator

Generate cookie consent banner code

Settings

Banner Style

Banner Text

Accept Button Text

Reject Button Text

Manage Preferences Text

Link Text

Consent Mode

Cookie Expiry

days

NecessaryAnalyticsMarketingFunctional

Google Consent Mode v2Adds gtag consent signals (ad_storage, analytics_storage, ad_user_data, ad_personalization) for Google Ads and GA4.

Colors

Theme Presets

Text

Accept Button Text

Accept Button Text Text

Reject Button Text

Reject Button Text Text

Preview

We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.

Result

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">Accept All</button>
      <button id="cc-reject-btn">Reject All</button>
      <button id="cc-manage-btn">Manage Preferences</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Cookie Preferences">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Cookie Preferences</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Necessary</div>
          <div class="cc-pref-desc">Required for the site to work. These cannot be switched off.</div>
        </div>
        <span class="cc-pref-always">Always active</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Analytics</div>
          <div class="cc-pref-desc">Help us understand how visitors use the site so we can improve it.</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="Analytics"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">Save Preferences</button>
      <button id="cc-prefs-cancel">Cancel</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

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

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

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

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

What is Cookie Consent Generator?

Builds a GDPR-compliant cookie consent banner and hands you the HTML, CSS, and JavaScript to drop into your site. Pick a style, set the cookie categories, and adjust how consent is stored.

The output is a self-contained snippet: HTML for the banner, CSS for the styling, and a small JavaScript shim that writes the visitor's choice to a cookie and reloads only the categories they accepted. You can paste it directly into your site or download the three files as a zip for cleaner integration.

How to use

Pick a banner style (top bar, bottom bar, modal, corner popup) and customize colors, text, and button labels.
Configure cookie categories (necessary, analytics, marketing, functional), how long consent is remembered, and the consent behavior (opt-in vs opt-out).
Copy or download the generated HTML/CSS/JS code and add it to your website.

When to use

Adding a GDPR or CCPA notice to a static site or marketing landing page.
Replacing a heavy third-party CMP that loads 200 KB before the user clicks anything.
Prototyping a banner design before handing the spec to your engineering team.

Result

A site owner creating a GDPR-compliant blog selects a bottom bar banner with 'Accept All' and 'Manage Preferences' buttons, enables analytics and marketing categories, and downloads the code snippet to add before the closing body tag.

FAQ

Does this generator make my site GDPR compliant on its own?: The banner gives the visitor a clear opt-in or opt-out choice and stores their preference, which covers the consent UI requirement. You still need a privacy policy page and you must actually block scripts in the categories they reject.
How do I block Google Analytics until consent is given?: Two ways. The simplest is to tick the Google Consent Mode v2 box: the generated script then emits gtag consent signals, starting denied and switching to granted only after the visitor accepts the matching category. Otherwise, gate the gtag tag yourself behind an if-check that reads the cookie the banner sets, so the script is never inserted until consent is given.
Can I change the wording after I have already deployed the banner?: Yes. Re-open the generator with similar settings, regenerate, and replace the strings inside the banner div. Existing visitors keep their previous consent because the cookie name does not change.
What is the difference between opt-in and opt-out mode?: Opt-in starts with all non-essential categories disabled and only activates them after the user accepts. Opt-out starts with them enabled, which is allowed under CCPA but not under GDPR. Pick opt-in if any of your visitors are in the EU.
Will the banner show up again every time someone visits?: No. Once a visitor saves a choice, the cookie lasts as long as the expiry you set (six months by default). The banner only reappears after that, or if the cookie is cleared, or if you bump the consent version inside the JS file.

Cookie Consent Generator

Settings

Colors

Preview

Result

What is Cookie Consent Generator?

How to use

When to use

Result

FAQ

Related Tools

Structured Data Generator

Webpage to PDF

Privacy Policy Generator

Terms of Service Generator

CSS Minifier

HTML Minifier

Cookie Consent Generator

Settings

Colors

Preview

Result