10+ CSS Weather Icons
The Pure CSS Weather Icon Examples collection demonstrates how meteorological symbols function through CSS animation and geometry. Weather icons built from shapes and motion eliminate image dependencies — enabling real-time theme updates and seamless integration with weather data without asset switching.
Weather icons use radial-gradient and conic-gradient to construct cloud formations and sun rays; border-radius creates spheres for rain and snow particles. Pseudo-elements layer clouds, precipitation, and wind patterns; animation drives continuous motion — clouds drift, rain falls, snow swirls. Transform: rotate() spins wind symbols and sun icons; animation-delay staggers raindrops and snowflakes for natural particle effects. CSS Custom Properties store weather colors (sunny yellow, stormy gray, snowy white), enabling instant theme switching. Clip-path shapes lightning bolts and wind indicators; filter: blur() softens cloud edges.
Responsive design scales weather icons fluidly via em units and calc(), maintaining visual balance from 24px to 256px+ sizes. Accessibility is native: semantic HTML ensures screen readers announce weather conditions. The collection includes free CodePen demos, downloadable code, and updated examples. Each snippet prioritizes Core Web Vitals — zero layout shift through fixed dimensions, hardware-accelerated animations via will-change: transform, minimal repaints using contain: paint.
Examples
A minimalist yet atmospheric thunderstorm scene, where a static cloud and lightning bolt are complemented by dynamic rain.
Animated SVG Weather Icons
A suite of animated weather icons utilizing inline SVG and CSS keyframes to create fluid, vector-based meteorological effects.
See the Pen Animated SVG Weather Icons.
Animated Weather Icons
A lightweight, scalable, and visually pleasing set of weather icons that can be easily adapted to any website color scheme.
See the Pen Animated Weather Icons.
A pure‑CSS weather sequence cycles through nine states — from sunny to sleet — using keyframed animations. Every cloud, raindrop, and lightning bolt is built with nested <ul> elements and pseudo‑effects. The entire 10‑second loop runs without JavaScript.
A collection of Google Now‑style weather icons, each built from composable CSS classes. Icons like sun, cloud, rain, and snow are assembled using nested elements and pseudo‑elements, with clip‑path and transforms shaping the mist and lightning. The layout uses floated list items; the page is static and purely illustrative.
A collection of animated weather icons built with pure CSS — clouds, rain, thunder, snow, and more. Each icon is constructed from nested <div> elements, pseudo‑effects, and heavy use of box‑shadow for complex shapes. Keyframe animations drive the rain, lightning, and spinning rays.
SCSS variables define consistent color palettes for each weather icon. Every icon is an SVG group animated via CSS keyframes — spinning rays, falling raindrops, drifting clouds. The markup is static; all motion is pure CSS, no JavaScript involved.
Custom properties define color themes for each weather icon — sunny, cloudy, snowy, stormy, and supermoon. Icons are built with nested pseudo‑elements and CSS animations: drifting clouds, falling snow, flashing lightning, and spinning stars. The design is modular, responsive, and runs entirely without JavaScript.
This snippet builds five weather icons using pure CSS — no external images or JavaScript. Each icon is constructed with a single <div> and pseudo‑elements, styled with radial gradients and box‑shadows. Keyframe animations bring them to life: clouds drift, raindrops fall, lightning flashes, and the sun pulses.
SCSS mixins handle vendor prefixes for gradients, transforms, and animations. Each weather icon is a composite of absolutely positioned <div> elements and pseudo‑effects. Keyframe animations drive the sun’s rotation, drifting clouds, falling raindrops, fading stars, and a swinging crescent moon. No JavaScript — the page is a static, purely visual demo.
A pure‑CSS weather icon set that maps directly to Wunderground API condition names. Each icon is built from nested <div> elements and pseudo‑effects, using transforms, borders, and CSS shapes.
A set of SVG weather icons with built‑in SMIL animations — clouds drift, rain falls, lightning flashes, and the sun pulses. Each icon is self‑contained; the animations loop independently. The code is verbose but functional, requiring no external CSS or JavaScript.
Three weather cards built with pure CSS — each has a hover effect that deepens the shadow. The sun and moon use layered box‑shadows and keyframe animations to simulate rays. The mountains are simple shapes positioned absolutely. No JavaScript; all values are static.