Scrolling Text Generator

Cookie Consent Banner Generator

Create cookie consent banners with accept/decline buttons, privacy policy links, and localStorage-based persistence. Multiple position options.

Live Preview
Your website content here

We use cookies to enhance your browsing experience. By continuing to use this site, you agree to our use of cookies. Learn more

Generated Code
<style>
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #1a1a2e;
  color: #ffffff;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  z-index: 9999;
  border-radius: 0px;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.15);
}
.cookie-banner p {
  margin: 0;
  
  line-height: 1.5;
}
.cookie-banner a {
  color: #6366f1;
  text-decoration: underline;
}
.cookie-btns {
  display: flex;
  gap: 8px;
  
}
.cookie-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.cookie-accept {
  background: #6366f1;
  color: #ffffff;
}
.cookie-decline {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff40;
}
</style>

<div class="cookie-banner" id="cookieBanner">
    <p>We use cookies to enhance your browsing experience. By continuing to use this site, you agree to our use of cookies. <a href="/privacy-policy">Learn more</a></p>
    <div class="cookie-btns">
      <button class="cookie-btn cookie-accept" onclick="document.getElementById('cookieBanner').remove(); localStorage.setItem('cookieConsent','accepted')">Accept</button>
      <button class="cookie-btn cookie-decline" onclick="this.closest('.cookie-banner').remove()">Decline</button>
    </div>
  </div>

<script>
if (localStorage.getItem('cookieConsent') === 'accepted') {
  const el = document.getElementById('cookieBanner');
  if (el) el.remove();
}
</script>

Content

Layout & Style