Back to CSS Stacked Cards Notification Pile Pure CSS
Share
.scd-not {
  position: relative; width: 220px; height: 200px; margin: 0 auto;
  background: linear-gradient(180deg, #000 0%, #1c1c1e 100%);
  border-radius: 28px;
  padding: 14px 0;
  border: 2px solid #2a2a2c;
  overflow: hidden;
}
.scd-not__c {
  position: absolute; left: 50%; top: 12px;
  width: 196px; margin-left: -98px;
  background: rgba(58, 58, 64, 0.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 14px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5);
  animation: scd-not-arrive 5s cubic-bezier(.3,1,.3,1) infinite;
  animation-delay: calc(var(--i) * 1.25s);
  opacity: 0;
}
@keyframes scd-not-arrive {
  0%   { transform: translateY(-60px) scale(1);    opacity: 0; }
  10%  { transform: translateY(0)     scale(1);    opacity: 1; }
  35%  { transform: translateY(40px)  scale(0.96); opacity: 0.85; }
  60%  { transform: translateY(76px)  scale(0.92); opacity: 0.6; }
  85%  { transform: translateY(108px) scale(0.88); opacity: 0.3; }
  100% { transform: translateY(140px) scale(0.84); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scd-not__c {
    animation: none; opacity: calc(1 - var(--i) * 0.2);
    transform: translateY(calc(var(--i) * 36px)) scale(calc(1 - var(--i) * 0.04));
  }
}
.scd-not__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 4px var(--a);
  flex-shrink: 0;
}
.scd-not__c b    { flex: 1; font: 700 12px/1 system-ui; }
.scd-not__c .scd-not__t { font: 11px/1 ui-monospace, monospace; opacity: 0.65; flex-shrink: 0; }
<div class="scd-not">
  <div class="scd-not__c" style="--i:0; --a:#ff3b30"><span class="scd-not__dot"></span><b>Alarm</b><span class="scd-not__t">7:00 AM</span></div>
  <div class="scd-not__c" style="--i:1; --a:#34c759"><span class="scd-not__dot"></span><b>Activity</b><span class="scd-not__t">+12 mins</span></div>
  <div class="scd-not__c" style="--i:2; --a:#0a84ff"><span class="scd-not__dot"></span><b>Calendar</b><span class="scd-not__t">in 5 min</span></div>
  <div class="scd-not__c" style="--i:3; --a:#ffd60a"><span class="scd-not__dot"></span><b>Mail</b><span class="scd-not__t">2 new</span></div>
</div>
Live preview Edit any tab — preview updates live Ready