Glass Toast Notification: CSS Glass Effect

Glass Toast Notification

An iOS style frosted notification drops onto a lock screen with a little bounce, waits, then slides away on a loop. Hover pauses it. Opacity and backdrop-filter share one element so it fades cleanly.

Also known as: glassmorphism notification css, ios notification banner css, frosted toast css.

Ava Chennow Dinner at 8? I booked the place by the river.

Color Base size 16px Dark background Hold hover state

HTML

<div class="gls-glass-toast-notification">
  <span class="gls-glass-toast-notification-orb" aria-hidden="true"></span>
  <p class="gls-glass-toast-notification-clock" aria-hidden="true">9:41</p>
  <div class="gls-glass-toast-notification-toast" role="status">
    <span class="gls-glass-toast-notification-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 4c4.7 0 8.5 3 8.5 6.8s-3.8 6.8-8.5 6.8c-1 0-2-.1-2.9-.4L4.5 19l1.3-3.4C4.4 14.4 3.5 12.7 3.5 10.8 3.5 7 7.3 4 12 4z"/></svg>
    </span>
    <span class="gls-glass-toast-notification-body">
      <span class="gls-glass-toast-notification-top"><b>Ava Chen</b><time>now</time></span>
      <span class="gls-glass-toast-notification-msg">Dinner at 8? I booked the place by the river.</span>
    </span>
  </div>
</div>

CSS

.gls-glass-toast-notification {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 50%, #1e1b4b), color-mix(in srgb, var(--c) 30%, #9d174d) 70%, #f97316);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-toast-notification-orb {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -3em;
  width: 11em;
  height: 11em;
  margin-left: -5.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 45%, transparent 70%);
  animation: gls-glass-toast-notification-orb 8s ease-in-out infinite alternate;
}
.gls-glass-toast-notification-clock {
  position: absolute;
  bottom: 0.35em;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 3.4em;
  font-weight: 250;
  letter-spacing: -0.02em;
  color: rgb(255 255 255 / 0.9);
}
.gls-glass-toast-notification-toast {
  display: flex;
  align-items: center;
  gap: 0.65em;
  width: 16.5em;
  margin-top: 0.75em;
  padding: 0.6em 0.75em;
  border-radius: 1.1em;
  background: color-mix(in srgb, #fff 24%, transparent);
  -webkit-backdrop-filter: blur(0.9em) saturate(1.5);
  backdrop-filter: blur(0.9em) saturate(1.5);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 0.5em 1.5em -0.5em rgb(0 0 0 / 0.35), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  animation: gls-glass-toast-notification-show 5s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.gls-glass-toast-notification:hover .gls-glass-toast-notification-toast { animation-play-state: paused; }
.gls-glass-toast-notification-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 0.55em;
  background: linear-gradient(180deg, #86efac, #16a34a);
}
.gls-glass-toast-notification-icon svg { width: 1.2em; height: 1.2em; }
.gls-glass-toast-notification-body { display: grid; flex: 1; min-width: 0; }
.gls-glass-toast-notification-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.72em;
}
.gls-glass-toast-notification-top time { color: rgb(255 255 255 / 0.7); }
.gls-glass-toast-notification-msg {
  overflow: hidden;
  font-size: 0.7em;
  color: rgb(255 255 255 / 0.9);
  white-space: nowrap;
  text-overflow: ellipsis;
}
@keyframes gls-glass-toast-notification-show {
  0% { opacity: 0; transform: translateY(-4em) scale(0.94); }
  10% { opacity: 1; transform: translateY(0.25em) scale(1); }
  15%, 74% { opacity: 1; transform: translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateY(-4em) scale(0.94); }
}
@keyframes gls-glass-toast-notification-orb {
  to { transform: translate(3em, 1em) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .gls-glass-toast-notification, .gls-glass-toast-notification *, .gls-glass-toast-notification::before, .gls-glass-toast-notification::after, .gls-glass-toast-notification *::before, .gls-glass-toast-notification *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --gls-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --gls-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Glass Toast Notification

HTML

CSS

Customizing this snippet

Similar glass effects

Frosted glass

Readable over anything