Cookie Consent Banner Generator

Generate GDPR-compliant cookie consent banners with customizable position, theme, text, and colors.

Position

Theme

Banner Text

Accept Button Text

Decline Button Text

Generated HTML + JS

<!-- Cookie Consent Banner -->
<div id="cookie-consent-banner" style="position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#1a1a1a;color:#ffffff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;box-shadow:0 -2px 8px rgba(0,0,0,0.15);font-family:system-ui,sans-serif;font-size:14px;">
  <span>We use cookies to improve your experience on our website. <a href="/privacy-policy" style="color:#4f46e5">Privacy Policy</a></span>
  <div style="display:flex;gap:8px;flex-shrink:0;">
    <button onclick="declineCookies()" style="padding:8px 16px;border:1px solid #ffffff40;background:transparent;color:#ffffff;border-radius:6px;cursor:pointer;font-size:14px;">Decline</button>
    <button onclick="acceptCookies()" style="padding:8px 16px;background:#4f46e5;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;">Accept All</button>
  </div>
</div>

<script>
(function() {
  if (localStorage.getItem('cookieConsent')) {
    document.getElementById('cookie-consent-banner').style.display = 'none';
  }
})();

function acceptCookies() {
  localStorage.setItem('cookieConsent', 'accepted');
  document.getElementById('cookie-consent-banner').style.display = 'none';
}

function declineCookies() {
  localStorage.setItem('cookieConsent', 'declined');
  document.getElementById('cookie-consent-banner').style.display = 'none';
}
</script>

How to implement a GDPR cookie consent banner

Under GDPR, websites must obtain consent before storing non-essential cookies. This banner uses localStorageto remember the user's choice. Add the generated code just before the closing </body> tag. The banner hides automatically once the user accepts or declines.

Private & free — this tool runs entirely in your browser.