← All Blogs

Smooth Modal Animations & Blur Effects

August 09, 2025 • WebCore Team • Interactive Demo

There are 2 important things to consider when using elements that on top of other elements:

Smooth opening and closing. This gives users clear, gentle feedback. Properly timed transitions reduce surprise, signal intent, and make interactions feel reliable and responsive.

A softly blurred background. This helps focus attention on the active element while preserving context. It reduces distractions without hiding the page, creating a calm, immersive experience for users.

Demo

Experience how blur effects enhance focus and isolate users from background distractions.
Click on the buttons to see the difference.


<div id="modal-container"></div>

<!-- CSS Animations -->
<style>
  .modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
  }
  
  .modal-overlay.blurred.show {
    animation: blurIn 0.3s forwards;
  }
  
  @keyframes blurIn {
    from { backdrop-filter: blur(0px); opacity: 0; }
    to { backdrop-filter: blur(6px); opacity: 1; }
  }
  
  .modal {
    background: white;
    padding: 30px;
    border-radius: 12px;
    transform: scale(0.8);
    opacity: 0;
  }
  
  .modal.show {
    animation: modalIn 0.3s forwards;
  }
  
  @keyframes modalIn {
    to { transform: scale(1); opacity: 1; }
  }
</style>

<!-- JavaScript -->
<script>
function openModal(blur) {
  const overlay = document.createElement('div');
  overlay.className = 'modal-overlay';
  if (blur) overlay.classList.add('blurred', 'show');

  const modal = document.createElement('div');
  modal.className = 'modal';
  modal.innerHTML = `
    <h3>Modal Example</h3>
    <p>This modal is ${blur ? 'with' : 'without'} blurred background.</p>
    <button onclick="closeModal(this)">Close</button>
  `;

  overlay.appendChild(modal);
  document.getElementById('modal-container').appendChild(overlay);

  if (blur) {
    setTimeout(() => modal.classList.add('show'), 10);
  } else {
    modal.style.opacity = '1';
    modal.style.transform = 'scale(1)';
    overlay.style.opacity = '1';
  }
}
</script>