Skip to content

Centered Modal

A copy-paste cookie & consent component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Cookie & ConsentHTMLCSSany framework
Privacy Notice

We value your privacy

We use cookies for essential site functions, analytics, and personalised content. You can customise your preferences.

Privacy Policy

Copy into your project

HTML
<div class="nuda-ck-modal">
  <div class="nuda-ck-modal__badge">Privacy Notice</div>
  <h3 class="nuda-ck-modal__title">We value your privacy</h3>
  <p class="nuda-ck-modal__desc">
    We use cookies for essential site functions, analytics, and personalised content.
    You can customise your preferences.
  </p>
  <div class="nuda-ck-modal__row">
    <button class="nuda-ck-modal__btn nuda-ck-modal__btn--outline">Preferences</button>
    <button class="nuda-ck-modal__btn nuda-ck-modal__btn--fill">Accept All</button>
  </div>
  <a class="nuda-ck-modal__policy" href="#">Privacy Policy</a>
</div>
CSS
.nuda-ck-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  width: 240px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  animation: _nuda-ckmodalIn .5s cubic-bezier(.16,1,.3,1) both;
}

.nuda-ck-modal__badge {
  display: inline-block;
  background: rgba(228,255,84,.12);
  color: #e4ff54;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

.nuda-ck-modal__title {
  color: #fafafa;
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}

.nuda-ck-modal__desc {
  color: #777;
  font-size: .72rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.nuda-ck-modal__row {
  display: flex;
  gap: .5rem;
  margin-bottom: .65rem;
}

.nuda-ck-modal__btn {
  flex: 1;
  border: none;
  border-radius: 9px;
  padding: .5rem 0;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.nuda-ck-modal__btn:hover {
  opacity: .8;
}

.nuda-ck-modal__btn--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: #cfcfcf;
}

.nuda-ck-modal__btn--fill {
  background: #e4ff54;
  color: #0a0a0a;
}

.nuda-ck-modal__policy {
  color: #555;
  font-size: .68rem;
  text-decoration: none;
}

.nuda-ck-modal__policy:hover {
  color: #cfcfcf;
}

@keyframes _nuda-ckmodalIn {
  from {
    opacity: 0;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ck-modal {
    animation: none;
  }
}

How to use Centered Modal

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More cookie & consent components

← Browse all NudaUI components