Four weather cards — CSS only, built by Underdog Saluki 27B

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Weather · Pure CSS Cards</title>
<style>
/* ============ Design system ============ */
:root {
  --card-h: 380px;
  --radius: 22px;
  --shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }

html { background: #141821; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 90% at 50% -10%, #2b3448 0%, #141821 55%);
  display: grid;
  place-items: center;
}

main {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 48px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* ============ Card shell ============ */
.card {
  position: relative;
  flex: 1 1 260px;
  min-width: 260px;
  height: var(--card-h);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sky {
  position: absolute;
  inset: 0;
}

.info {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .82);
}

.temp {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============ Cloud (shared) ============ */
.cloud {
  position: absolute;
  width: var(--cw, 150px);
  height: 54px;
  border-radius: 999px;
  background: var(--c, #56637d);
  top: var(--ct, 12%);
  left: var(--cl, 18%);
}
.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  top: -46%;
  border-radius: 50%;
  background: inherit;
}
.cloud::before { width: 56%; height: 62%; left: 14%; }
.cloud::after  { width: 72%; height: 76%; left: 38%; }

@keyframes cloud-bob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14px); }
}

/* ============ SUN ============ */
.sky--sun {
  background: linear-gradient(180deg, #ffe9a8 0%, #ffb45c 55%, #f47b3f 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
}

.sun__glow {
  position: absolute;
  inset: -44px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 202, 92, .5) 0%, rgba(255, 202, 92, .22) 45%, transparent 70%);
  animation: glow-pulse 4s ease-in-out infinite;
  animation-delay: -1.2s;
}

.sun__rays {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: conic-gradient(from -8deg,
    rgba(255, 216, 92, .55) 0deg,  rgba(255, 216, 92, .55) 16deg,
    transparent 16deg,             transparent 45deg,
    rgba(255, 216, 92, .55) 45deg, rgba(255, 216, 92, .55) 61deg,
    transparent 61deg,             transparent 90deg,
    rgba(255, 216, 92, .55) 90deg, rgba(255, 216, 92, .55) 106deg,
    transparent 106deg,            transparent 135deg,
    rgba(255, 216, 92, .55) 135deg, rgba(255, 216, 92, .55) 151deg,
    transparent 151deg,            transparent 180deg,
    rgba(255, 216, 92, .55) 180deg, rgba(255, 216, 92, .55) 196deg,
    transparent 196deg,            transparent 225deg,
    rgba(255, 216, 92, .55) 225deg, rgba(255, 216, 92, .55) 241deg,
    transparent 241deg,            transparent 270deg,
    rgba(255, 216, 92, .55) 270deg, rgba(255, 216, 92, .55) 286deg,
    transparent 286deg,            transparent 315deg,
    rgba(255, 216, 92, .55) 315deg, rgba(255, 216, 92, .55) 331deg,
    transparent 331deg,            transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 40%);
  mask: radial-gradient(circle, transparent 34%, #000 40%);
  animation: spin 26s linear infinite;
}

.sun__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    #fff8c9 0%, #ffe48a 45%, #ffb347 78%, #ff9a2e 100%);
  box-shadow: 0 0 24px 6px rgba(255, 190, 80, .55);
  animation: sun-pulse 4s ease-in-out infinite;
  animation-delay: -0.4s;
}

.cloud--drift {
  --c: rgba(150, 120, 90, .55);
  --cw: 150px;
  top: 36%;
  left: 0;
  animation: cloud-drift 12s linear infinite;
  animation-delay: -3s;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.12); }
}
@keyframes cloud-drift {
  0%   { transform: translateX(-220%); }
  100% { transform: translateX(220%); }
}

/* ============ RAIN ============ */
.sky--rain {
  background: linear-gradient(180deg, #97a7c0 0%, #6d7f9f 60%, #566385 100%);
}

.cloud--rain {
  --c: #56637d;
  --cw: 170px;
  top: 12%;
  left: 18%;
  animation: cloud-bob 7s ease-in-out infinite;
  animation-delay: -1.5s;
}

.rain {
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  height: 240px;
}

.drop {
  position: absolute;
  top: 0;
  left: var(--fx);
  width: 2px;
  height: var(--fh, 14px);
  border-radius: 3px;
  background: rgba(255, 255, 255, var(--fo, .8));
  will-change: transform;
  animation: fall var(--fd, 3.5s) linear infinite;
  animation-delay: var(--fdel, 0s);
}

.drop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 92%;
  width: 16px;
  height: 5px;
  margin-left: -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: translateX(-50%) scale(0);
  animation: splash var(--fd, 3.5s) linear infinite;
  animation-delay: var(--fdel, 0s);
}

.puddle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: rgba(16, 24, 40, .38);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.puddle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, .08) 20%, transparent 40%,
    rgba(255, 255, 255, .06) 65%, transparent 85%);
  background-size: 220px 100%;
  animation: shimmer 5s linear infinite;
}

@keyframes fall {
  0%   { transform: translateY(0) rotate(5deg); opacity: 0; }
  6%   { transform: translateY(18px) rotate(5deg); opacity: 1; }
  88%  { transform: translateY(226px) rotate(5deg); opacity: 1; }
  93%  { transform: translateY(234px) rotate(5deg) scaleY(2.2); opacity: .4; }
  100% { transform: translateY(234px) rotate(5deg) scaleY(2.2); opacity: 0; }
}
@keyframes splash {
  0%, 87% { transform: translateX(-50%) scale(0); opacity: 0; }
  91%     { transform: translateX(-50%) scale(1); opacity: .85; }
  100%   { transform: translateX(-50%) scale(1.7); opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: 0 0; }
  100% { background-position: 220px 0; }
}

/* ============ SNOW ============ */
.sky--snow {
  background: linear-gradient(180deg, #c3cfe4 0%, #9fb2d2 55%, #7e94bd 100%);
}

.cloud--snow {
  --c: #8394b3;
  --cw: 160px;
  top: 12%;
  left: 22%;
  animation: cloud-bob 8s ease-in-out infinite;
  animation-delay: -5s;
}

.snow {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  height: 270px;
}

.flake {
  position: absolute;
  top: 0;
  left: var(--fx);
  width: var(--fs, 8px);
  height: var(--fs, 8px);
  border-radius: 50%;
  background: rgba(255, 255, 255, var(--fo, .9));
  will-change: transform;
  animation: snow-fall var(--ff, 12s) linear infinite;
  animation-delay: var(--fdel, 0s);
}

.flake--round { border-radius: 26%; }

.snowbank {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #e8eef7 100%);
  border-top: 1px solid rgba(255, 255, 255, .9);
  animation: snowbank-swell 16s ease-in-out infinite;
  animation-delay: -4s;
}

@keyframes snow-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(var(--sway, 12px), 67px) rotate(90deg); }
  50%  { transform: translate(0, 134px) rotate(180deg); }
  75%  { transform: translate(calc(var(--sway, 12px) * -1), 201px) rotate(270deg); }
  100% { transform: translate(0, 268px) rotate(360deg); }
}
@keyframes snowbank-swell {
  0%, 100% { height: 14px; }
  50%      { height: 24px; }
}

/* ============ STORM ============ */
.sky--storm {
  background: linear-gradient(180deg, #232a38 0%, #1b2230 45%, #10141e 100%);
}

.cloud--storm {
  --c: #2e3547;
  --cw: 190px;
  top: 10%;
  left: 16%;
  animation: cloud-bob 6s ease-in-out infinite;
  animation-delay: -2.5s;
}

.rain--heavy .drop {
  width: 3px;
  background: rgba(255, 255, 255, .95);
}

.card--storm .puddle {
  background: rgba(8, 12, 20, .55);
  border-top-color: rgba(255, 255, 255, .12);
}

.bolt {
  position: absolute;
  top: 14%;
  width: 90px;
  height: 150px;
  background: #fff599;
  box-shadow: 0 0 22px 10px rgba(255, 245, 150, .95),
              0 0 70px 20px rgba(255, 235, 120, .5);
  clip-path: polygon(
    5% 0%, 80% 0%, 35% 16%, 85% 22%,
    20% 42%, 75% 48%, 10% 70%, 55% 76%,
    0% 100%, 40% 100%
  );
  opacity: 0;
  animation: storm-flash 22s linear infinite;
}

.bolt--a {
  left: 38%;
}
.bolt--b {
  left: 70%;
  height: 110px;
  animation-delay: -9s;
}

.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 25%,
    #8fa8ff 0%, #6a8aff 35%, rgba(70, 90, 255, .15) 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  animation: storm-flash 22s linear infinite;
  animation-delay: -7s;
}

@keyframes storm-flash {
  0%, 4.9%     { opacity: 0; }
  5%           { opacity: 1; }
  5.2%         { opacity: .15; }
  5.5%         { opacity: .85; }
  5.8%         { opacity: 0; }
  12.1%, 12.25% { opacity: 0; }
  12.3%        { opacity: .7; }
  12.5%        { opacity: .1; }
  12.7%        { opacity: 0; }
  18.4%, 18.55% { opacity: 0; }
  18.6%        { opacity: 1; }
  18.8%        { opacity: .3; }
  19.1%        { opacity: .9; }
  19.4%        { opacity: 0; }
  24.2%, 24.35% { opacity: 0; }
  24.4%        { opacity: .8; }
  24.7%        { opacity: 0; }
  100%         { opacity: 0; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .sun__glow, .sun__rays, .sun__disc,
  .cloud, .drop, .drop::after,
  .puddle::before, .flake, .snowbank,
  .bolt, .flash {
    animation: none;
  }
}
</style>
</head>
<body>
<main>
  <!-- SUN -->
  <section class="card card--sun">
    <div class="sky sky--sun"></div>
    <div class="sun">
      <div class="sun__glow"></div>
      <div class="sun__rays"></div>
      <div class="sun__disc"></div>
    </div>
    <div class="cloud cloud--drift"></div>
    <div class="info">
      <span class="label">SUN</span>
      <span class="temp">26°C</span>
    </div>
  </section>

  <!-- RAIN -->
  <section class="card card--rain">
    <div class="sky sky--rain"></div>
    <div class="cloud cloud--rain"></div>
    <div class="rain">
      <span class="drop" style="--fx:6%;  --fh:14px; --fo:.85; --fd:3.1s; --fdel:-0.4s;"></span>
      <span class="drop" style="--fx:15%; --fh:12px; --fo:.7;  --fd:3.7s; --fdel:-1.9s;"></span>
      <span class="drop" style="--fx:24%; --fh:15px; --fo:.9;  --fd:2.9s; --fdel:-2.6s;"></span>
      <span class="drop" style="--fx:33%; --fh:13px; --fo:.75; --fd:4.2s; --fdel:-0.8s;"></span>
      <span class="drop" style="--fx:42%; --fh:16px; --fo:.95; --fd:3.4s; --fdel:-1.3s;"></span>
      <span class="drop" style="--fx:51%; --fh:12px; --fo:.65; --fd:4.6s; --fdel:-3.1s;"></span>
      <span class="drop" style="--fx:60%; --fh:14px; --fo:.8;  --fd:3.2s; --fdel:-2.2s;"></span>
      <span class="drop" style="--fx:69%; --fh:15px; --fo:.9;  --fd:3.8s; --fdel:-0.6s;"></span>
      <span class="drop" style="--fx:78%; --fh:13px; --fo:.75; --fd:3.5s; --fdel:-1.6s;"></span>
      <span class="drop" style="--fx:87%; --fh:14px; --fo:.85; --fd:4.0s; --fdel:-2.9s;"></span>
    </div>
    <div class="puddle"></div>
    <div class="info">
      <span class="label">RAIN</span>
      <span class="temp">14°C</span>
    </div>
  </section>

  <!-- SNOW -->
  <section class="card card--snow">
    <div class="sky sky--snow"></div>
    <div class="cloud cloud--snow"></div>
    <div class="snow">
      <span class="flake" style="--fx:10%; --fs:10px; --fo:.9;  --sway:14px; --ff:11s; --fdel:-2s;"></span>
      <span class="flake" style="--fx:22%; --fs:7px;  --fo:.8;  --sway:10px; --ff:14s; --fdel:-6s;"></span>
      <span class="flake flake--round" style="--fx:34%; --fs:12px; --fo:.95; --sway:18px; --ff:10s; --fdel:-1s;"></span>
      <span class="flake" style="--fx:46%; --fs:6px;  --fo:.75; --sway:9px;  --ff:16s; --fdel:-9s;"></span>
      <span class="flake" style="--fx:58%; --fs:9px;  --fo:.85; --sway:12px; --ff:12s; --fdel:-4s;"></span>
      <span class="flake flake--round" style="--fx:70%; --fs:11px; --fo:.9;  --sway:16px; --ff:13s; --fdel:-7s;"></span>
      <span class="flake" style="--fx:82%; --fs:8px;  --fo:.8;  --sway:11px; --ff:15s; --fdel:-3s;"></span>
      <span class="flake" style="--fx:90%; --fs:10px; --fo:.85; --sway:13px; --ff:10s; --fdel:-8s;"></span>
    </div>
    <div class="snowbank"></div>
    <div class="info">
      <span class="label">SNOW</span>
      <span class="temp">-2°C</span>
    </div>
  </section>

  <!-- STORM -->
  <section class="card card--storm">
    <div class="sky sky--storm"></div>
    <div class="cloud cloud--storm"></div>
    <div class="rain rain--heavy">
      <span class="drop" style="--fx:5%;  --fh:15px; --fo:.95; --fd:1.7s; --fdel:-0.2s;"></span>
      <span class="drop" style="--fx:13%; --fh:13px; --fo:.8;  --fd:2.1s; --fdel:-1.1s;"></span>
      <span class="drop" style="--fx:21%; --fh:16px; --fo:.9;  --fd:1.5s; --fdel:-0.7s;"></span>
      <span class="drop" style="--fx:29%; --fh:12px; --fo:.7;  --fd:2.4s; --fdel:-1.8s;"></span>
      <span class="drop" style="--fx:37%; --fh:14px; --fo:.85; --fd:1.9s; --fdel:-0.4s;"></span>
      <span class="drop" style="--fx:45%; --fh:15px; --fo:.95; --fd:1.6s; --fdel:-1.3s;"></span>
      <span class="drop" style="--fx:53%; --fh:13px; --fo:.75; --fd:2.2s; --fdel:-0.9s;"></span>
      <span class="drop" style="--fx:61%; --fh:14px; --fo:.9;  --fd:1.8s; --fdel:-1.6s;"></span>
      <span class="drop" style="--fx:69%; --fh:16px; --fo:.85; --fd:2.0s; --fdel:-0.5s;"></span>
      <span class="drop" style="--fx:77%; --fh:12px; --fo:.7;  --fd:2.3s; --fdel:-1.4s;"></span>
      <span class="drop" style="--fx:85%; --fh:14px; --fo:.8;  --fd:1.7s; --fdel:-0.8s;"></span>
      <span class="drop" style="--fx:93%; --fh:13px; --fo:.9;  --fd:2.5s; --fdel:-1.2s;"></span>
    </div>
    <div class="puddle"></div>
    <div class="flash"></div>
    <div class="bolt bolt--a"></div>
    <div class="bolt bolt--b"></div>
    <div class="info">
      <span class="label">STORM</span>
      <span class="temp">9°C</span>
    </div>
  </section>
</main>
</body>
</html>