Focus Lock Modal

A focus lock modal built with pure HTML and CSS that visually isolates a dialog and guides user attention to a single interface element, helping prevent distraction while a task or message is being addressed.

Usage

This component is best used when user concentration must remain within one interface area, such as form completion dialogs, guided steps, important notices, or short interaction flows that should not be visually diluted by background content.

Implementation

The focus effect is created using CSS layering, backdrop dimming, and transition-based visibility, allowing the modal area to stand out while surrounding content is visually softened and interaction priority is given to the modal.

HTML

<div class="focus-modal" role="dialog" aria-modal="true">
  <div class="focus-box">
    <h3>Attention Required</h3>
    <p>This action can’t be undone.</p>
    <div class="actions">
      <button class="secondary">Cancel</button>
      <button class="primary">Proceed</button>
    </div>
  </div>
</div>

<div class="focus-modal" role="dialog" aria-modal="true">
  <div class="focus-box">
    <h3>Attention Required</h3>
    <p>This action can’t be undone.</p>
    <div class="actions">
      <button class="secondary">Cancel</button>
      <button class="primary">Proceed</button>
    </div>
  </div>
</div>

CSS

.focus-modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0),
    rgba(0,0,0,0)
  );
  display: grid;
  place-items: center;
}

.focus-box {
  width: 200px;
  padding: 18px;
  border-radius: 16px;
  background: #005461;
  color: #f8fafc;
  animation: scaleIn .3s ease;
}

.focus-box h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.actions button {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.actions button:hover {
  transform: translateY(-1px);
}

.primary {
  background: #ef4444;
  color: white;
}

.secondary {
  background: #1e293b;
  color: #e5e7eb;
}

@keyframes scaleIn {
  from { transform: scale(.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.focus-modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0),
    rgba(0,0,0,0)
  );
  display: grid;
  place-items: center;
}

.focus-box {
  width: 200px;
  padding: 18px;
  border-radius: 16px;
  background: #005461;
  color: #f8fafc;
  animation: scaleIn .3s ease;
}

.focus-box h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.actions button {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.actions button:hover {
  transform: translateY(-1px);
}

.primary {
  background: #ef4444;
  color: white;
}

.secondary {
  background: #1e293b;
  color: #e5e7eb;
}

@keyframes scaleIn {
  from { transform: scale(.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Emphasizes a single interaction region
• Reduces visual noise from background elements
• Encourages task completion through isolation
• Designed for attention-driven UI moments

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.