Pure CSS Weather

Four skies · HTML + CSS only

Live · Animated with @keyframes

Today’s weather,
in pure CSS.

Every icon below is built from plain HTML elements and pseudo-elements — rotating sun rays, falling rain, drifting snow and flashing lightning. No images, no icon libraries.

4 CSS Icons Hover to lift Reduced-motion ready
Phoenix, AZ Clear sky
32°C Feels like34°

Bright sunshine all day long with a gentle desert breeze.

Humidity28%
Wind12 km/h
UV IndexVery high
London, UK Showers
18°C Feels like16°

Steady rain through the afternoon, easing by evening.

Humidity84%
Rain12 mm
Wind22 km/h
Reykjavík, IS Snowfall
-4°C Feels like-9°

Light snow with fresh powder and a quiet, hushed sky.

Humidity76%
Snow6 cm
Wind18 km/h
Miami, FL Storm
27°C Feels like30°

Thunderstorms with frequent lightning and heavy gusts.

Humidity91%
Gusts48 km/h
Rain28 mm