Cookie consent banner generator — copy-paste HTML, CSS and JavaScript

Set your banner text, button labels, position and colours, and the tool gives you one HTML snippet that shows the banner and remembers the visitor's choice. It does not block cookies by itself; it is a starting template, not legal advice, and consent rules differ by country.

Live demo · real result from this tool
Position

Snippet (paste before </body>)

<!-- Cookie consent banner: paste before </body>. Non-essential scripts must wait for the "cookieconsent" event. --><style>.cc-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px;background:#111827;color:#f9fafb;font:14px/1.5 system-ui,sans-serif;box-shadow:0 -2px 16px rgba(0,0,0,.15)}.cc-banner[hidden]{display:none}.cc-banner p{margin:0;flex:1 1 260px}.cc-banner a{color:inherit;text-decoration:underline}.cc-actions{display:flex;gap:8px}.cc-btn{font:inherit;padding:8px 16px;border-radius:6px;cursor:pointer;border:2px solid #2563eb}.cc-accept{background:#2563eb;color:#fff}.cc-decline{background:transparent;color:inherit}</style><div class="cc-banner" id="cc-banner" role="region" aria-label="Cookie consent" hidden>  <p>We use cookies to make this site work and, with your permission, to understand how it is used. <a href="/cookie-policy">Cookie policy</a></p>  <div class="cc-actions">    <button type="button" class="cc-btn cc-decline" data-cc="declined">Decline</button>    <button type="button" class="cc-btn cc-accept" data-cc="accepted">Accept</button>  </div></div><script>(function () {  var KEY = "cookie-consent";
  var banner = document.getElementById("cc-banner");
  function read() { try { return localStorage.getItem(KEY); } catch (e) { return null; } }
  function apply(choice) {
    // Load non-essential scripts (analytics, ads) ONLY when choice === "accepted".
    document.dispatchEvent(new CustomEvent("cookieconsent", { detail: choice }));
  }
  var saved = read();
  if (saved) { apply(saved); } else { banner.hidden = false; }
  banner.addEventListener("click", function (e) {
    var choice = e.target && e.target.getAttribute("data-cc");
    if (!choice) return;
    try { localStorage.setItem(KEY, choice); } catch (e2) {}
    banner.hidden = true;
    apply(choice);
  });
  // To let visitors change their mind, call: localStorage.removeItem("cookie-consent"); location.reload();
})();
</script>

Preview

The banner remembers the choice in localStorage and fires a “cookieconsent” event. It does not block scripts by itself: load analytics or ads only after the event reports “accepted”. Decline is shown with the same weight as Accept. Template, not legal advice.

Processed on your device — nothing is uploaded.

  1. Write the Banner text and set the Cookie policy URL (default /cookie-policy; leave it empty to hide the link).
  2. Change the Accept label and Decline label if you like, for example “Allow all” and “Reject all”.
  3. Choose a Position: Bottom bar, Top bar or Corner box.
  4. Pick the Background, Text and Button colours, and set a Storage key.
  5. Copy the Snippet (paste before </body>) or download cookie-banner.html, and paste it just before the closing body tag of every page.

What it does and when to use it

Use it on a small site that needs a simple yes/no cookie choice without a third-party consent platform. The snippet has three parts: a <style> block, the banner markup (an ARIA region labelled “Cookie consent” with your text, policy link and two buttons), and a script. Decline is outlined and Accept is filled with your button colour; both use the same size and border.

It does not cover per-category choices (only all or nothing), blocking or deleting cookies, a settings panel, records of consent, or translations. You still need a cookie policy that explains what you set; the cookie policy generator writes one. Check the Accept button’s white text against your button colour with the color contrast checker.

How it works

The banner starts hidden. On page load the script reads localStorage under your storage key. If a choice is saved, it fires a cookieconsent event with that choice and keeps the banner hidden; if not, it shows the banner. A click on a button saves “accepted” or “declined”, hides the banner and fires the same event. Load non-essential scripts only in a listener that checks for “accepted”. The storage key keeps only letters, digits, _, . and -.

Worked examples

Defaults. The snippet contains <div class="cc-banner" id="cc-banner" role="region" aria-label="Cookie consent" hidden> and var KEY = "cookie-consent";, with a dark bar fixed to the bottom of the screen.

Corner box with custom labels. Position Corner box, Accept “Allow all”, Decline “Reject all”, storage key “my site consent!”. The CSS uses bottom:16px;left:16px;max-width:360px, the button reads <button type="button" class="cc-btn cc-decline" data-cc="declined">Reject all</button>, and the key is cleaned to var KEY = "mysiteconsent";.

Limits and tips

  • Add your listener first. For returning visitors, the event fires as soon as the snippet runs, so register your cookieconsent listener in a script above the snippet.
  • Keep the buttons equal. The EDPB report says button colours and contrast must not be obviously misleading, and gives unreadable text on the alternative button as an example.
  • Test both paths. Check in your browser’s developer tools that nothing non-essential loads before you click Accept, or after Decline.
  • Laws differ by country. These sources cover the EU and UK.

Frequently asked questions

Does this banner make my site compliant?
No. It only asks and remembers. Your analytics and ad scripts must wait for the visitor's "accepted" choice, which you have to wire up yourself. The ICO says you cannot set non-essential cookies on your home page before the user has consented.
Why does the banner have a Decline button on the first screen?
In the EDPB taskforce report, most EU data protection authorities said a banner with an accept button but no reject option on any layer is not in line with the requirements for valid consent. The generator always shows Decline next to Accept, at the same size.
How do visitors change their mind?
The snippet has no settings link. Its last code comment shows how to clear the saved choice and reload so the banner appears again. The EDPB report says website owners should offer an easy way to withdraw consent at any time, such as a visible icon or link, so add a "Cookie settings" link in your footer that runs that code.
Is saving the choice in localStorage itself a problem?
The EDPB report recalls an earlier opinion that cookies which keep the preferences users expressed about a service should be deemed essential. Get advice for your own setup, because this is a template, not legal advice.

Sources

  1. Directive 2002/58/EC (ePrivacy Directive), Article 5(3) — EUR-Lex, Publications Office of the European Union, accessed 2026-10-07
  2. Report of the work undertaken by the Cookie Banner Taskforce (adopted 17 January 2023) — European Data Protection Board, accessed 2026-10-07
  3. Cookies and similar technologies (guide to PECR) — Information Commissioner's Office (UK), accessed 2026-10-07

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated · Figures last verified

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close