A scale fade attention modal built with pure HTML and CSS that draws focus to important content by gently scaling and fading into view, creating a smooth attention-grabbing effect without relying on JavaScript or external libraries.
Usage
This component is well suited for moments where visual emphasis is required without harsh interruption, such as feature announcements, success messages, important tips, or soft confirmation prompts that should feel noticeable but not aggressive.
Implementation
The scale-fade behavior is implemented using CSS transforms, opacity transitions, and timing control, allowing the modal to grow slightly while becoming visible, producing a natural and polished entrance animation.
HTML
<div class="sf-preview">
<div class="sf-modal">
<h4>Attention</h4>
<p>This action needs confirmation.</p>
<button class="sf-btn">Continue</button>
</div>
</div>CSS
.sf-preview{
width:200px;
height:140px;
margin:auto;
display:grid;
place-items:center;
background:rgba(0,0,0,0);
border-radius:14px;
}
.sf-modal{
width:160px;
padding:12px;
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;
animation:scaleFade 1.8s ease-in-out infinite;
}
.sf-modal h4{
font-size:11px;
margin-bottom:4px;
}
.sf-modal p{
font-size:9px;
opacity:.85;
margin-bottom:8px;
}
.sf-btn{
width:100%;
padding:6px 0;
border:none;
border-radius:999px;
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#ffffff;
font-size:9px;
font-weight:600;
cursor:pointer;
}
@keyframes scaleFade{
0%{
opacity:0;
transform:scale(.9);
}
40%{
opacity:1;
transform:scale(1);
}
70%{
opacity:1;
transform:scale(1);
}
100%{
opacity:0;
transform:scale(.9);
}
}
:root{
--modal-bg:#ffffff;
--modal-text:#0f172a;
--modal-border:#e5e7eb;
}
@media (prefers-color-scheme: dark){
:root{
--modal-bg:#111827;
--modal-text:#e5e7eb;
--modal-border:#1f2937;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Combines scale and fade transitions for emphasis
- Creates smooth, non-disruptive attention cues
- Visually separates modal from background content
- 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.