Modals & Interactive Overlays 3 Production-Ready Templates

Modern CSS Modals & Sliding Drawers

Build accessible and tactile dialogs with physics-based spring animations, frosted backdrop blurs, off-canvas drawers, and morphing dynamic status pills.

Spring-Curve Scaling ESC & Backdrop Dismiss 1-Click Code Copy

Quick Navigation

1. Spring Physics Modal Dialog→2. Off-Canvas Sliding Drawer→3. Dynamic Island Morphing Pill→

Spring Physics & Backdrop Blur

1. Spring Physics Modal Dialog

Tactile cubic-bezier scale entrance with frosted glass backdrop blur and escape key dismissal.

<!-- Modal Trigger Button -->
<button id="openModalBtn" class="btn-open-modal">Open Modal Dialog</button>

<!-- Modal Backdrop & Dialog Box -->
<div id="modalBackdrop" class="modal-backdrop">
  <div class="modal-dialog">
    <div class="modal-header">
      <span class="badge">Confirmation</span>
      <button id="closeModalBtn" class="close-x">×</button>
    </div>
    <h3 class="modal-title">Deploy Changes to Staging?</h3>
    <p class="modal-desc">This action will compile all front-end assets and synchronize schemas with the staging database.</p>
    <div class="modal-actions">
      <button id="cancelModalBtn" class="btn-cancel">Cancel</button>
      <button class="btn-confirm">Confirm & Deploy</button>
    </div>
  </div>
</div>

.btn-open-modal {
  padding: 0.85rem 1.75rem;
  background: #db2777;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(219, 39, 119, 0.35);
  transition: all 0.2s ease;
}

.btn-open-modal:hover {
  background: #be185d;
  transform: translateY(-2px);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.modal-backdrop * {
  box-sizing: border-box;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: #ffffff;
  border-radius: 1.25rem;
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  transform: scale(0.8) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-backdrop.is-open .modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: #db2777;
  text-transform: uppercase;
}

.close-x {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 0.5rem 0;
}

.modal-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 1.75rem 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.btn-cancel {
  padding: 0.6rem 1.2rem;
  background: #f1f5f9;
  color: #475569;
  font-weight: 700;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
}

.btn-confirm {
  padding: 0.6rem 1.2rem;
  background: #db2777;
  color: #ffffff;
  font-weight: 700;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
}

const openBtn = document.getElementById('openModalBtn');
const closeBtn = document.getElementById('closeModalBtn');
const cancelBtn = document.getElementById('cancelModalBtn');
const backdrop = document.getElementById('modalBackdrop');

function openModal() {
  backdrop.classList.add('is-open');
}

function closeModal() {
  backdrop.classList.remove('is-open');
}

openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
cancelBtn.addEventListener('click', closeModal);

// Close on backdrop outside click
backdrop.addEventListener('click', (e) => {
  if (e.target === backdrop) closeModal();
});

// Close on Escape key press
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && backdrop.classList.contains('is-open')) {
    closeModal();
  }
});

Side Drawer Navigation

2. Off-Canvas Sliding Side Drawer

Smooth right-to-left sliding panel ideal for notifications, filters, and shopping carts.

Notifications

⚡ Build SuccessfulYour commit was deployed to edge nodes in 1.2s.

🔒 SSL RenewedWildcard TLS certificate valid for 90 days.

<!-- Trigger Button -->
<button id="openDrawerBtn" class="btn-drawer">Open Side Drawer 🔔</button>

<!-- Side Drawer Overlay & Panel -->
<div id="drawerOverlay" class="drawer-overlay"></div>

<aside id="drawerPanel" class="drawer-panel">
  <div class="drawer-header">
    <h4>Activity Feed</h4>
    <button id="closeDrawerBtn" class="close-btn">×</button>
  </div>
  <div class="drawer-body">
    <div class="notify-card">
      <strong>⚡ Build Successful</strong>
      <p>Your project was deployed to global edge nodes in 1.2s.</p>
    </div>
  </div>
</aside>

.btn-drawer {
  padding: 0.85rem 1.75rem;
  background: #e11d48;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(225, 29, 72, 0.35);
  transition: all 0.2s ease;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #0f172a;
  color: #ffffff;
  padding: 1.75rem;
  box-shadow: -15px 0 35px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.drawer-panel * {
  box-sizing: border-box;
}

.drawer-panel.is-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.drawer-header h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
}

.notify-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.notify-card strong {
  display: block;
  font-size: 0.85rem;
  color: #fb7185;
  margin-bottom: 0.25rem;
}

.notify-card p {
  margin: 0;
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.4;
}

const openDrawerBtn = document.getElementById('openDrawerBtn');
const closeDrawerBtn = document.getElementById('closeDrawerBtn');
const drawerPanel = document.getElementById('drawerPanel');
const drawerOverlay = document.getElementById('drawerOverlay');

function openDrawer() {
  drawerPanel.classList.add('is-open');
  drawerOverlay.classList.add('is-open');
}

function closeDrawer() {
  drawerPanel.classList.remove('is-open');
  drawerOverlay.classList.remove('is-open');
}

openDrawerBtn.addEventListener('click', openDrawer);
closeDrawerBtn.addEventListener('click', closeDrawer);
drawerOverlay.addEventListener('click', closeDrawer);

Morphing Micro-UI

3. Dynamic Island Morphing Status Pill

Expanding floating notification pill with fluid width, height, and border-radius physics.

Click the pill below to toggle expanded state

● Live Sync24 ms

Edge StatusHealthy (100%)

35 regions actively routing traffic. Zero cold starts detected in last 24 hours.

<div class="dynamic-island" id="myIsland">
  <!-- Compact State -->
  <div class="island-compact">
    <span class="dot">● Live Sync</span>
    <span class="ping">24 ms</span>
  </div>

  <!-- Expanded State -->
  <div class="island-expanded">
    <div class="island-header">
      <span class="tag">Edge Status</span>
      <span class="status">Healthy (100%)</span>
    </div>
    <p>35 regions actively routing traffic with sub-10ms latency.</p>
  </div>
</div>

.dynamic-island {
  position: relative;
  background: #000000;
  border: 1px solid #334155;
  color: #ffffff;
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  width: auto;
  min-width: 180px;
  max-width: 180px;
  transition: all 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.dynamic-island * {
  box-sizing: border-box;
}

.dynamic-island.is-expanded {
  min-width: 320px;
  max-width: 320px;
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: #0f172a;
}

.island-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
}

.island-compact .dot {
  color: #10b981;
}

.island-compact .ping {
  color: #94a3b8;
  font-size: 0.75rem;
}

.island-expanded {
  display: none;
}

.dynamic-island.is-expanded .island-compact {
  display: none;
}

.dynamic-island.is-expanded .island-expanded {
  display: block;
  animation: fadeIn 0.3s ease;
}

.island-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #334155;
}

.island-header .tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #c084fc;
  text-transform: uppercase;
}

.island-header .status {
  font-size: 0.75rem;
  font-weight: 700;
  color: #34d399;
}

.island-expanded p {
  margin: 0;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.4;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

const island = document.getElementById('myIsland');

island.addEventListener('click', () => {
  island.classList.toggle('is-expanded');
});

Frequently Asked Questions

How do these modal dialogs handle keyboard navigation and accessibility?

The JavaScript includes listeners for the Escape key (`Escape`) to instantly dismiss open dialogs and restores focus, ensuring your interactive overlays are keyboard accessible and user-friendly.

Can I use multiple modals or drawers on the same page?

Yes! The CSS and JavaScript are structured using standard class triggers (`is-open` or `data-modal-target`) so you can bind multiple distinct dialogs and drawers without code conflicts.

Does the backdrop filter blur work across all modern browsers?

Yes! We include both standard `backdrop-filter: blur(12px)` and `-webkit-backdrop-filter: blur(12px)` prefixes, which are supported across Chrome, Safari, Edge, and modern Firefox.