About this snippet

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.

Size
3.1 KB
Uses
HTML, CSS
Loads
Nothing external
Views
402

Collections

Related snippets

<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-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;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save