Category · Hero Sections Difficulty Level · Beginner Published on · August 18, 2025

Cookie Consent Banner

A modern and unobtrusive cookie consent banner that complies with GDPR regulations.

#cookie #consent #GDPR #banner

Responsive Design

Yes

Dark Mode Support

Yes

lines

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

200px

Overview

A modern and unobtrusive cookie consent banner that complies with GDPR regulations.

How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.

Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.
Test dark mode with your preferred background and text colors.

HTML

lines

CSS

lines

JavaScript

lines

                <div class="cookie-consent-banner" id="cookie-banner">
  <p>This website uses cookies to ensure you get the best experience. <a href="#">Learn more</a></p>
  <div class="cookie-buttons">
    <button class="cookie-btn" id="accept-cookies">Accept</button>
    <button class="cookie-btn" id="decline-cookies">Decline</button>
  </div>
</div>

              

                .cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transform: translateY(100%);
  animation: slideIn 0.5s forwards;
}

@keyframes slideIn {
  to {
    transform: translateY(0);
  }
}

.cookie-consent-banner p {
  margin: 0;
  font-size: 14px;
}

.cookie-consent-banner a {
  color: #3498db;
  text-decoration: none;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
}

.cookie-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cookie-btn:hover {
  background-color: #2980b9;
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const cookieBanner = document.getElementById('cookie-banner');
  const acceptButton = document.getElementById('accept-cookies');
  const declineButton = document.getElementById('decline-cookies');

  if (!localStorage.getItem('cookie_consent')) {
    cookieBanner.style.display = 'flex';
  }

  acceptButton.addEventListener('click', () => {
    localStorage.setItem('cookie_consent', 'accepted');
    cookieBanner.style.display = 'none';
  });

  declineButton.addEventListener('click', () => {
    localStorage.setItem('cookie_consent', 'declined');
    cookieBanner.style.display = 'none';
  });
});

              

Browser Compatibility

Chrome

>= 60

Firefox

>= 55

Safari

>= 10

Edge

>= 15

Related Code Snippets

Animated Cookie Consent Banner

Modern cookie consent banner with smooth animations and customizable options, perfect for GDPR and privacy compliance.

Beginner

8/22/2025

Widgets

cookie consent banner privacy GDPR

View Code

Featured

Bottom Slide-in Cookie Consent Banner

A sleek bottom slide-in cookie consent banner with smooth transitions, progressive disclosure, and elegant animation effects

Intermediate

1/15/2024

Interactive

cookie-banner gdpr privacy consent responsive modern animated

View Code

Featured

Corner Toast Cookie Banner

A sleek corner toast-style cookie consent banner with notification-inspired design, smooth animations, and elegant positioning for non-intrusive user experience while maintaining GDPR compliance

Intermediate

1/15/2024

Interactive