OneTaskBy Tim King · Updated
Age Gate Builder
Age Verification Popup 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 Age Gate Builder works
Sites that sell alcohol, vapes or adult content usually need a confirmation screen before the
content. This age gate builder makes that screen: choose a simple yes/no question or a date-of-birth check, set the minimum age and how
long the answer is remembered, style the overlay, and copy a self-contained snippet you can paste
before </body>.
An age gate is a full-screen overlay that stays in front of the page until the visitor confirms their age. The generated snippet has three parts: the overlay markup, its CSS, and a short script that decides whether to show it.
Age gate types: yes/no or date of birth
The yes/no version asks one question. The date-of-birth version asks for a birthday and works out the age, counting a birthday later in the year as not yet reached. Some alcohol trade bodies recommend the date-of-birth version because it takes a moment of thought. Neither version proves anything: a client-side gate records what the visitor says, not who they are. Where the law requires real verification, you need an identity or payment check on the server.
Remembering the answer
When the visitor passes, the script stores a timestamp in
localStorage under age-verified and hides the gate until the number of days you set has gone
by. Set it to 0 and the gate appears on every visit and the timestamp is never written. Because
the value lives in the visitor's browser, clearing site data brings the gate back.
Under-age visitors
Pressing the decline button, or entering a date that is too recent, sends the browser to the redirect URL. A neutral search page is a common choice. You can also point it at a page on your own site that explains the policy.
Accessibility
The overlay has role="dialog", aria-modal="true" and a label taken from
its heading, so screen readers announce it as a dialog. The script also turns off page scrolling
while the gate is open. The markup starts hidden, so a visitor without JavaScript sees the
page rather than a gate they cannot get past. If the gate must be enforced, render it on the
server instead.
Placing it on your site
Paste the HTML just before </body>, the CSS into your stylesheet and the
script after the HTML. The overlay uses position: fixed and z-index: 1000, so it covers
headers and cookie banners. Raise the z-index if something still shows through.
FAQ
Is a JavaScript age gate legally enough?
It depends on the product and the country. For marketing sites about alcohol, a self-declaration gate is common practice. For selling age-restricted goods, or for adult content in countries with online safety laws, it is not enough, because the law expects the age to be checked. Treat this snippet as a courtesy screen and get advice about what your market requires.
Will an age gate hurt SEO?
Not with this snippet. The page content is in the HTML and the gate is only shown by script, so search engines index the page as normal. Gates that redirect everyone to a separate "enter" page, or hide the content until a button is pressed, are the ones that cause indexing problems.
How do I reset the age gate while testing?
Open your browser's developer tools, find Local Storage for your site and delete the
age-verified key, or run localStorage.removeItem("age-verified") in the console. Setting the
remember period to 0 while you work also keeps the gate appearing on every load.
Can I show the age gate on only some pages?
Yes. Include the snippet only in the templates for those pages. They share the same storage key, so a visitor who passes on one page will not be asked again on the others.
Why use a date input instead of three dropdowns?
A native date input gives mobile users the system date picker, works with keyboards and screen readers, and returns a single ISO date for the script to check. Three dropdowns take more code to make accessible and are slower to fill in on a phone.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Backdrop Filter Generator
Compose backdrop-filter functions and preview the result live.
Glassmorphism Generator
Frosted glass panels with backdrop-filter, previewed live.
Card Builder
Design a card component and copy its HTML and CSS.
Password Visibility Toggle
Show/hide password button with eye icon or text and correct ARIA state.
Maintenance Page Generator
Self-contained "down for maintenance" HTML page with your wording.