Back to Snippets

Cookie Preferences Modal HTML & CSS

Allow users to choose which cookies they accept with this detailed settings modal. It features toggles for different categories like analytics and marketing, which helps you comply with GDPR regulations while respecting user privacy.

344

#html

#css

#cookie consent

#modal

#gdpr

#privacy

#settings

#toggle

#ui

/HTML *CSS ()JS Output Live Updates

.cookie-settings {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 500px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #f3f4f6;
}
.cookie-header h3 {
  margin: 0 0 10px 0;
  color: #1f2937;
}
.cookie-header p {
  color: #6b7280;
  font-size: 0.95rem;
  margin-bottom: 25px;
}
.preference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f3f4f6;
}
.preference-item:last-child {
  border-bottom: none;
  margin-bottom: 20px;
}
.pref-info strong {
  display: block;
  color: #374151;
  margin-bottom: 4px;
}
.pref-info span {
  font-size: 0.85rem;
  color: #9ca3af;
}
/* Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #10b981;
}
input:checked + .slider:before {
  transform: translateX(20px);
}
.switch.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cookie-footer {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}
button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.btn-primary {
  background: #1f2937;
  color: white;
}
.btn-secondary {
  background: #f3f4f6;
  color: #374151;
}
button:hover {
  opacity: 0.9;
}

<div class="cookie-settings">
  <div class="cookie-header">
    <h3>Cookie Preferences</h3>
    <p>Manage your privacy settings. Essential cookies are always on.</p>
  </div>
  <div class="cookie-body">
    <div class="preference-item">
      <div class="pref-info">
        <strong>Essential</strong>
        <span>Required for the site to work.</span>
      </div>
      <label class="switch disabled">
        <input type="checkbox" checked disabled>
        <span class="slider"></span>
      </label>
    </div>
    <div class="preference-item">
      <div class="pref-info">
        <strong>Analytics</strong>
        <span>Helps us improve our website.</span>
      </div>
      <label class="switch">
        <input type="checkbox" checked>
        <span class="slider"></span>
      </label>
    </div>
    <div class="preference-item">
      <div class="pref-info">
        <strong>Marketing</strong>
        <span>Used for targeted advertising.</span>
      </div>
      <label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>
  </div>
  <div class="cookie-footer">
    <button class="btn-secondary">Reject All</button>
    <button class="btn-primary">Save Preferences</button>
  </div>
</div>

Cookie Preferences Modal HTML & CSS

Share Code Snippet