A focus trap centered modal built with pure HTML and CSS that positions a dialog in the middle of the viewport and visually restricts attention to that area, helping users complete a task without drifting to surrounding interface elements.
Usage
This component is ideal for scenarios where precise user interaction is required in one place, such as login prompts, short forms, verification steps, or dialogs that must be handled before returning to the main layout.
Implementation
The centered layout is achieved using CSS flex or grid centering combined with layered overlays and controlled visibility states, ensuring the modal remains fixed in the viewport while background elements are visually deprioritized.
HTML
<div class="modal-overlay">
<div class="modal-center">
<h3>Confirm Action</h3>
<p>Are you sure you want to continue?</p>
<button class="confirm-btn" type="button">
Confirm
</button>
</div>
</div>CSS
:root{
--overlay-bg:rgba(0,0,0,0);
--modal-bg:#ffffff;
--modal-text:#0f172a;
--modal-border:#e5e7eb;
--btn-gradient:linear-gradient(135deg,#2563eb,#3b82f6);
--btn-shadow:0 6px 16px rgba(37,99,235,.35);
}
@media (prefers-color-scheme: dark){
:root{
--overlay-bg:rgba(0,0,0,.25);
--modal-bg:#111827;
--modal-text:#e5e7eb;
--modal-border:#1f2937;
--btn-gradient:linear-gradient(135deg,#3b82f6,#60a5fa);
--btn-shadow:0 6px 18px rgba(59,130,246,.5);
}
}
.modal-overlay{
position:relative;
min-height:160px;
padding:12px;
display:grid;
place-items:center;
background:var(--overlay-bg);
border-radius:14px;
}
.modal-center{
width:190px;
padding:14px;
background:var(--modal-bg);
color:var(--modal-text);
border-radius:12px;
border:1px solid var(--modal-border);
box-shadow:0 12px 26px rgba(0,0,0,.18);
text-align:center;
font-size:9px;
}
.modal-center h3{
font-size:11px;
font-weight:600;
margin-bottom:4px;
}
.modal-center p{
font-size:9px;
opacity:.85;
margin-bottom:10px;
}
.modal-center .confirm-btn{
width:100%;
padding:8px 0;
border:none;
border-radius:999px;
background:var(--btn-gradient);
color:#ffffff;
font-size:10px;
font-weight:600;
letter-spacing:.3px;
cursor:pointer;
box-shadow:var(--btn-shadow);
transition:
transform .15s ease,
box-shadow .15s ease,
filter .15s ease;
}
.modal-center .confirm-btn:hover{
transform:translateY(-1px);
filter:brightness(1.05);
box-shadow:0 10px 24px rgba(37,99,235,.45);
}
.modal-center .confirm-btn:active{
transform:translateY(0);
box-shadow:var(--btn-shadow);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Anchors interaction to a single centered panel
- Minimizes distraction from surrounding UI
- Suitable for compact, task-focused dialogs
- Works in modern browsers
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.