Free Component

GDPR Cookie Consent Banner

A modern floating GDPR cookie banner with category preference toggles, Accept All / Necessary Only buttons, and persistent state dismiss.

dark
cookie
banner
privacy
gdpr
modal
compliance

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="cookie-banner" id="cookieBanner">
  <div class="cookie-top">
    <div class="cookie-icon-wrap">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 2a14.5 14.5 0 0 0 0 20 10 10 0 0 0-10-10"></path>
        <path d="M8.5 8.5v.01"></path>
        <path d="M16 15.5v.01"></path>
        <path d="M12 12v.01"></path>
      </svg>
    </div>
    <div class="cookie-text">
      <h4>We value your privacy</h4>
      <p>We use cookies to enhance navigation, analyze site traffic, and personalize content. Customize preferences anytime.</p>
    </div>
  </div>

  <div class="cookie-toggles" id="cookieToggles" style="display: none;">
    <div class="cookie-row">
      <span>Essential (Always Active)</span>
      <span class="cookie-lock">Required</span>
    </div>
    <div class="cookie-row">
      <span>Analytics & Performance</span>
      <label class="c-switch"><input type="checkbox" id="analyticsCheck" checked><span class="c-slider"></span></label>
    </div>
    <div class="cookie-row">
      <span>Marketing & Targeting</span>
      <label class="c-switch"><input type="checkbox" id="marketingCheck"><span class="c-slider"></span></label>
    </div>
  </div>

  <div class="cookie-actions">
    <button class="cookie-btn cookie-pref" id="prefBtn">Preferences</button>
    <div class="cookie-right-btns">
      <button class="cookie-btn cookie-reject" id="rejectBtn">Essential Only</button>
      <button class="cookie-btn cookie-accept" id="acceptBtn">Accept All</button>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a modern GDPR cookie consent banner in HTML, CSS and vanilla JavaScript.

Requirements:
- Floating glassmorphism card in bottom corner with 18px radius, dark navy backdrop, and blur effect.
- Header with amber cookie SVG icon, title, and concise explanation.
- Expandable preferences accordion with toggle switches for Analytics and Marketing cookies (Essential is locked).
- Action buttons: 'Preferences', 'Essential Only' (grey button), and 'Accept All' (blue button).
- Smooth entry slide animation and clean exit transition on dismissal.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Create a fixed position floating container with high z-index and backdrop-filter blur.
2
Add preference category rows with CSS toggle switches for granular opt-in compliance.
3
Toggle the visibility of preferences when the user clicks 'Preferences'.
4
Animate dismissal with opacity and translateY before removing from DOM.

Customisation tips

In production, persist user preferences in localStorage or cookies for 12 months.
Ensure essential cookies are locked on and cannot be disabled by mistake.