AI CSS Animations

Glass Weather Widget

An iOS style weather widget in frosted glass over a live sky: the sun turns behind it and clouds drift across, blurred by the pane. Current conditions on top, a five hour forecast below.

Also known as: glassmorphism weather card css, weather widget css, ios weather widget glass.

Lisbon 24° Mostly sunny · H:27° L:18°
  1. Now24°
  2. 1426°
  3. 1527°
  4. 1625°
  5. 1723°

HTML

<div class="gls-glass-weather-widget">
  <span class="gls-glass-weather-widget-sun" aria-hidden="true"></span>
  <span class="gls-glass-weather-widget-cloud gls-glass-weather-widget-cloud-a" aria-hidden="true"></span>
  <span class="gls-glass-weather-widget-cloud gls-glass-weather-widget-cloud-b" aria-hidden="true"></span>
  <article class="gls-glass-weather-widget-card">
    <div class="gls-glass-weather-widget-now">
      <span class="gls-glass-weather-widget-city">Lisbon</span>
      <span class="gls-glass-weather-widget-temp">24°</span>
      <span class="gls-glass-weather-widget-cond">Mostly sunny · H:27° L:18°</span>
    </div>
    <ol class="gls-glass-weather-widget-hours">
      <li><span>Now</span><i class="gls-glass-weather-widget-sunny"></i><b>24°</b></li>
      <li><span>14</span><i class="gls-glass-weather-widget-sunny"></i><b>26°</b></li>
      <li><span>15</span><i class="gls-glass-weather-widget-cloudy"></i><b>27°</b></li>
      <li><span>16</span><i class="gls-glass-weather-widget-cloudy"></i><b>25°</b></li>
      <li><span>17</span><i class="gls-glass-weather-widget-sunny"></i><b>23°</b></li>
    </ol>
  </article>
</div>

CSS

.gls-glass-weather-widget {
  --c: var(--gls-color, #3b82f6);
  font-size: var(--gls-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 1.25em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #0c4a6e), color-mix(in srgb, var(--c) 45%, #7dd3fc));
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
}
.gls-glass-weather-widget-sun {
  position: absolute;
  z-index: -1;
  right: 3.2em;
  top: 0.5em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3 0 1.3em, #facc15 1.35em 1.8em, transparent 1.85em), repeating-conic-gradient(rgb(253 224 71 / 0.75) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent);
  mask: radial-gradient(closest-side, #000 70%, transparent);
  animation: gls-glass-weather-widget-spin 20s linear infinite;
}
.gls-glass-weather-widget-cloud {
  position: absolute;
  z-index: -1;
  height: 1.8em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 1em -0.8em 0 0.3em #fff, 2.3em -0.2em 0 0.1em #fff;
}
.gls-glass-weather-widget-cloud-a {
  left: 1em;
  top: 2.8em;
  width: 4.2em;
  animation: gls-glass-weather-widget-drift 14s ease-in-out infinite alternate;
}
.gls-glass-weather-widget-cloud-b {
  left: 8em;
  bottom: 1.3em;
  width: 3.4em;
  opacity: 0.85;
  animation: gls-glass-weather-widget-drift 11s ease-in-out -6s infinite alternate-reverse;
}
.gls-glass-weather-widget-card {
  width: 14em;
  padding: 0.8em 0.95em 0.7em;
  border-radius: 1.2em;
  background: color-mix(in srgb, #fff 18%, 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);
  text-shadow: 0 0.05em 0.3em rgb(12 74 110 / 0.35);
}
.gls-glass-weather-widget-now { display: grid; }
.gls-glass-weather-widget-city { font-size: 0.78em; font-weight: 650; }
.gls-glass-weather-widget-temp {
  font-size: 2.4em;
  font-weight: 250;
  line-height: 1.05;
}
.gls-glass-weather-widget-cond { font-size: 0.62em; font-weight: 550; opacity: 0.9; }
.gls-glass-weather-widget-hours {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0.55em 0 0;
  padding: 0.5em 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.3);
  list-style: none;
  text-align: center;
}
.gls-glass-weather-widget-hours li {
  display: grid;
  justify-items: center;
  gap: 0.2em;
}
.gls-glass-weather-widget-hours span { font-size: 0.55em; font-weight: 600; opacity: 0.85; }
.gls-glass-weather-widget-hours b { font-size: 0.62em; font-weight: 650; }
.gls-glass-weather-widget-sunny,
.gls-glass-weather-widget-cloudy {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
}
.gls-glass-weather-widget-sunny {
  background: #fde047;
  box-shadow: 0 0 0.35em #fde047;
}
.gls-glass-weather-widget-cloudy {
  background: radial-gradient(circle at 70% 30%, #fde047 0 0.22em, transparent 0.24em), radial-gradient(circle at 40% 70%, #fff 0 0.34em, transparent 0.36em), radial-gradient(circle at 70% 72%, #e2e8f0 0 0.28em, transparent 0.3em);
}
@keyframes gls-glass-weather-widget-spin {
  to { transform: rotate(1turn); }
}
@keyframes gls-glass-weather-widget-drift {
  to { transform: translateX(9em); }
}

@media (prefers-reduced-motion: reduce) {
  .gls-glass-weather-widget, .gls-glass-weather-widget *, .gls-glass-weather-widget::before, .gls-glass-weather-widget::after, .gls-glass-weather-widget *::before, .gls-glass-weather-widget *::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.

Similar glass effects

Glassmorphism Card
Glass Navbar
Glassmorphism Login Form
Frosted Glass Panel