OneTaskBy Tim King · Updated
Cookie Banner Generator
Free Cookie Consent Bar in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Cookie Banner works
A cookie banner asks visitors whether they accept non-essential cookies, such as analytics, before any are set. This cookie banner generator makes a small bar or corner box with equal Accept and Reject buttons and remembers the choice, with no third-party consent service.
The banner starts hidden and a few lines of script show it only if no choice has been saved. When the
visitor picks a button, the choice is stored in localStorage as "accepted" or "rejected" and the
banner hides. The script has a marked spot where you load analytics or other optional scripts, so
nothing non-essential runs until the visitor accepts.
Designing a fair cookie banner
UK and EU regulators expect rejecting to be as easy as accepting, so both buttons are the same size, sit side by side and are one click away. Pre-ticked boxes, a hidden reject option or a banner that blocks the page until someone accepts are common reasons sites are criticised or fined.
Bar or corner box
The bottom bar spans the full width and wraps its buttons under the text on narrow screens. The corner box sits in the bottom right on large screens and fills the width on phones, which covers less of the page.
FAQ
Is this cookie banner enough for GDPR compliance?
It covers the visible part: asking before setting cookies, with a fair reject option. Compliance also depends on actually not loading tracking before consent, listing your cookies in a policy, and letting people change their mind, so check your own setup or ask a legal adviser.
How do visitors change their choice later?
Add a "Cookie settings" link in your footer that removes the saved item with
localStorage.removeItem("cookie-consent") and shows the banner again. Regulators expect withdrawing
consent to be as easy as giving it.
Do I need a cookie banner if I only use essential cookies?
Usually not. Cookies that are strictly needed for the site to work, such as a login session or a shopping basket, do not need consent. The banner is for analytics, advertising and other optional cookies.
Does the banner itself set a cookie?
No. The choice is saved in localStorage, which stays in the visitor's browser and is never sent to
your server. If your server needs to know the choice, set a first-party cookie in the click handler
as well.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Announcement Bar
Build a dismissible top-of-page announcement bar with rotating messages.
Modal Builder
Build an accessible modal window with the native dialog element.
Bottom Sheet
Build a slide-up bottom sheet with actions and swipe to close.
Popover Builder
Build a native HTML popover that opens next to its button.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.