If you are looking for an amazing collection of CSS weather widgets to offer real-time weather updates directly on web pages or projects, you’re in the right place. In this comprehensive post, we are showcasing the best collections of weather widgets created using HTML, CSS, and JavaScript examples.
We have carefully selected each weather widget code example from reputed platforms such as GitHub, CodePen, and many more, promising to display current weather conditions, forecasts, and other weather-related information within the web and mobile applications, enhancing the user experience and user engagement in a visually appealing and user-friendly manner.
The CSS weather widget offers site visitors instant weather information in an interactive manner, like temperature, humidity, possibility of rain, etc. Whether you’re an expert web designer, web developer, or product designer seeking cool and interactive weather widget design inspirations, our compilation of free HTML and CSS weather widget snippets is sure to assist you in presenting weather information and data in a relevant and realistic style.
Our CSS widgets are highly customizable, allowing you to adjust the look and feel, including colors, icons, and typography, with minimal knowledge of HTML, CSS, and JavaScript. Additionally, all our widgets are responsive, ensuring compatibility with modern browsers and seamless integration into various sections of your web projects, such as headers, sidebars, and more.
Feel free to explore our collection of highly interactive, visually striking, hand-picked CSS weather widget examples to elevate the interactivity, aesthetic appeal, and engagement of your projects.
1. Get Weather
See the Pen
Get Weather by Socrates Nguyen (@socrates)
on CodePen.
Author: Socrates Nguyen @socrates
Links: Source Code / Demo
Created on: JULY 25, 2015
Made with: HTML, CSS, JS
2. Storm Cloud
See the Pen
Codevember #6 – Storm Cloud by Nolan (@nolakat)
on CodePen.
Author: Nolan @nolakat
Links: Source Code / Demo
Created on: NOVEMBER 14, 2017
Made with: HTML, CSS(SCSS), JS
3. Flat Icons CSS – Dribbble Remake
See the Pen
Flat Icons CSS – Dribbble Remake by Tyler Fry (@frytyler)
on CodePen.
Author: Tyler Fry @frytyler
Links: Source Code / Demo
Created on: APRIL 27, 2013
Made with: HTML, CSS(SCSS)
4. Animated Weather Icons(pure CSS)
See the Pen
Animated Weather Icons(pure CSS) by Akhil Sai Ram (@akhil_001)
on CodePen.
Author: Akhil Sai Ram @akhil_001
Links: Source Code / Demo
Created on: DECEMBER 7, 2016
Made with: HTML, CSS
5. CSS Weather Icon (Experimental)
See the Pen
CSS Weather Icon (Experimental) by Tim Ruby (@TimRuby)
on CodePen.
Author: Tim Ruby @TimRuby
Links: Source Code / Demo
Created on: NOVEMBER 27, 2013
Made with: HTML, CSS(SCSS)
6. Weather App!
See the Pen
Weather App! by Matthew Greenberg (@mattgreenberg)
on CodePen.
Author: Matthew Greenberg @mattgreenberg
Links: Source Code / Demo
Created on: APRIL 8, 2016
Made with: HTML(Pug), CSS(Sass), JS(CoffeeScript)
7. Weather Widgets
See the Pen
Weather Widgets by Marcos Rodrigues (@rodriguesmarcos)
on CodePen.
Author: Marcos Rodrigues @rodriguesmarcos
Links: Source Code / Demo
Created on: JULY 27, 2014
Made with: HTML, CSS(Less)
8. Neumorphism Weather App
See the Pen
Neumorphism Weather App by Travis Williamson (@travisw)
on CodePen.
Author: Travis Williamson @travisw
Links: Source Code / Demo
Created on: JANUARY 17, 2020
Made with: HTML, CSS(SCSS), JS
9. Animated CSS Weather Icons — A Remix
See the Pen
Animated CSS Weather Icons — A Remix by Jase (@jasesmith)
on CodePen.
Author: Jase @jasesmith
Links: Source Code / Demo
Created on: DECEMBER 12, 2016
Made with: HTML, CSS
10. Weather App
See the Pen
Weather App by Tiffany Du (@tiffanyadu)
on CodePen.
Author: Tiffany Du @tiffanyadu
Links: Source Code / Demo
Created on: MARCH 26, 2017
Made with: HTML, CSS, JS
11. Animated CSS Seasons
See the Pen
Animated CSS Seasons by agathaco (@agathaco)
on CodePen.
Author: agathaco @agathaco
Links: Source Code / Demo
Created on: JANUARY 16, 2018
Made with: HTML(Pug), CSS(SCSS), JS(Babel)
12. Weather Widget App with Open Weather API
See the Pen
Weather Widget App with Open Weather API by myleschuahiock (@myleschuahiock)
on CodePen.
Author: myleschuahiock @myleschuahiock
Links: Source Code / Demo
Created on: FEBRUARY 28, 2016
Made with: HTML, CSS, JS
13. Weather App
See the Pen
Weather App by Sabine Robart (@_Sabine)
on CodePen.
Author: Sabine Robart @_Sabine
Links: Source Code / Demo
Created on: JANUARY 14, 2019
Made with: HTML, CSS(SCSS), JS
14. Weather Widget UI
See the Pen
Weather Widget UI by Amit Soni (@amit7soni)
on CodePen.
Author: Amit Soni @amit7soni
Links: Source Code / Demo
Created on: SEPTEMBER 1, 2018
Made with: HTML, CSS
15. Weather Popup/Widget
See the Pen
Weather Popup/Widget by Bradley Treweek (@cmd430)
on CodePen.
Author: Bradley Treweek @cmd430
Links: Source Code / Demo
Created on: MARCH 16, 2015
Made with: HTML, CSS
16. Weather Forecast
See the Pen
Weather Forecast by Mohan Khadka (@khadkamhn)
on CodePen.
Author: MOHAN KHADKA @khadkamhn
Links: Source Code / Demo
Created on: AUGUST 19, 2016
Made with: HTML, CSS
17. Animated Weather Icons
See the Pen
Animated Weather Icons by Josh Bader (@joshbader)
on CodePen.
Author: Josh Bader @joshbader
Links: Source Code / Demo
Created on: JUNE 11, 2015
Made with: HTML, CSS
18. Animated Weather Cards
See the Pen
Animated Weather Cards by Steve Gardner (@ste-vg)
on CodePen.
Author: Steve Gardner @ste-vg
Links: Source Cocade / Demo
Created on: AUGUST 22, 2016
Made with: HTML, CSS(SCSS), JS
19. CSS Weather Icon Animation (Practice)
See the Pen
CSS Weather Icon Animation (Practice) by Derek Palladino (@derekjp)
on CodePen.
Author: Derek Palladino @derekjp
Links: Source Code / Demo
Created on: JANUARY 6, 2015
Made with: HTML, CSS(SCSS)
20. Weather App
See the Pen
Weather App by Tiffany Du (@tiffanyadu)
on CodePen.
Author: Tiffany Du @tiffanyadu
Links: Source Code / Demo
Created on: MARCH 26, 2017
Made with: HTML, CSS, JS
21. Weather Widget
See the Pen
Weather Widget by Evan Peterson (@evanjpeterson)
on CodePen.
Author: Evan Peterson @evanjpeterson
Links: Source Code / Demo
Created on: JULY 23, 2018
Made with: HTML, CSS
22. Weather Icon Showcase | Pug, SCSS
See the Pen
Weather Icon Showcase | Pug, SCSS by Ayla (@sharedbyayla)
on CodePen.
Author: Ayla @sharedbyayla
Links: Source Code / Demo
Created on: MARCH 10, 2021
Made with: HTML(Pug), CSS(SCSS)
23. World Clock v2
See the Pen
World Clock v2 by Tobi Weinstock (@tvweinstock)
on CodePen.
Author: Tobi Weinstock @tvweinstock
Links: Source Code / Demo
Created on: OCTOBER 4, 2017
Made with: HTML, CSS(SCSS), JS(Babel)
24. Pure CSS One Div Weather Animated Icons
See the Pen
Pure CSS One Div Weather Animated Icons by Fabrizio Bianchi (@_fbrz)
on CodePen.
Author: Fabrizio Bianchi @_fbrz
Links: Source Code / Demo
Created on: JULY 12, 2014
Made with: HTML, CSS
25. Local Weather App for FreeCodeCamp
See the Pen
Local Weather App for FreeCodeCamp by Yago Estévez (@yagoestevez)
on CodePen.
Author: Yago Estévez @yagoestevez
Links: Source Code / Demo
Created on: APRIL 11, 2018
Made with: HTML, CSS
26. CSS Weather Animation
See the Pen
CSS Weather Animation by Daniel Boothman (@web-dev123)
on CodePen.
Author: Daniel Boothman @web-dev123
Links: Source Code / Demo
Created on: JULY 28, 2017
Made with: HTML, CSS
27. CSS3 animated weather icons
See the Pen
CSS3 animated weather icons by Lennart Hase (@motorlatitude)
on CodePen.
Author: Lennart Hase @motorlatitude
Links: Source Code / Demo
Created on: JANUARY 24, 2014
Made with: HTML, CSS
28. CSS Weather Icon Animation (Practice)
See the Pen
CSS Weather Icon Animation (Practice) by Derek Palladino (@derekjp)
on CodePen.
Author: Derek Palladino @derekjp
Links: Source Code / Demo
Created on: JANUARY 6, 2015
Made with: HTML, CSS(SCSS)
29. Weather Widget – Static
See the Pen
Weather Widget – Static by Nerios Lamaj (@nerios)
on CodePen.
Author: Nerios Lamaj @nerios
Links: Source Code / Demo
Created on: FEBRUARY 22, 2016
Made with: HTML, CSS, JS
30. CSS3 Weather Widget
See the Pen
CSS3 Weather Widget by Lennart Hase (@motorlatitude)
on CodePen.
Author: Lennart Hase @motorlatitude
Links: Source Code / Demo
Created on: MAY 25, 2014
Made with: HTML(Haml), CSS
31. Home portal app
See the Pen
Home portal app by Icebob (@icebob)
on CodePen.
Author: Icebob @icebob
Links: Source Code / Demo
Created on: JUNE 27, 2015
Made with: HTML, CSS(SCSS)
32. Analog Weather App
See the Pen
Analog Weather App by Johan Fagerbeg (@birjolaxew)
on CodePen.
Author: Johan Fagerbeg @birjolaxew
Links: Source Code / Demo
Created on: SEPTEMBER 15, 2013
Made with: HTML, CSS
33. CSS Weather Icons
See the Pen
CSS Weather Icons by Tiffany Du (@tiffanyadu)
on CodePen.
Author: Tiffany Du @tiffanyadu
Links: Source Code / Demo
Created on: MARCH 31, 2017
Made with: HTML, CSS
34. Weather Card using FlexBox
See the Pen
Weather Card using FlexBox by Aditya Bhandari (@takeradi)
on CodePen.
Author: Aditya Bhandari @takeradi
Links: Source Code / Demo
Created on: FEBRUARY 28, 2016
Made with: HTML, CSS
35. Authentic Weather Loader
See the Pen
Authentic Weather Loader by Tim Holman (@tholman)
on CodePen.
Author: Tim Holman @tholman
Links: Source Code / Demo
Created on: AUGUST 12, 2013
Made with: HTML, CSS(SCSS)
36. Weather Widget
See the Pen
Weather Widget by Aritha (@aritha)
on CodePen.
Author: Aritha @aritha
Links: Source Code / Demo
Created on: OCTOBER 23, 2015
Made with: HTML, CSS
37. Weather App, built with jQuery and Yahoo Weather API (4 color schemes) ⭐
See the Pen
Weather App, built with jQuery and Yahoo Weather API (4 color schemes) ⭐ by Stefan Tudoran (@tns301)
on CodePen.
Author: Stefan Tudoran @tns301
Links: Source Code / Demo
Created on: JUNE 4, 2017
Made with: HTML, CSS(Less), JS
38. SVG Icons Animated with CSS
See the Pen
SVG Icons Animated with CSS by Noah Blon (@noahblon)
on CodePen.
Author: Noah Blon @noahblon
Links: Source Code / Demo
Created on: APRIL 11, 2013
Made with: HTML, CSS(SCSS)
39. Local Weather App
See the Pen
Local Weather App by Zac Clemans (@thalpha)
on CodePen.
Author: Zac Clemans @thalpha
Links: Source Code / Demo
Created on: DECEMBER 14, 2015
Made with: HTML, CSS, JS(Babel)
40. Simple Weather App By Using OpenWeatherMap API & Custom Icons
See the Pen
Simple Weather App By Using OpenWeatherMap API & Custom Icons by Envato Tuts+ (@tutsplus)
on CodePen.
Author: Envato Tuts+ @tutsplus
Links: Source Code / Demo
Created on: DECEMBER 16, 2019
Made with: HTML, CSS
41. Simple Weather App Design
See the Pen
Simple Weather App Design by Colin Espinas (@Call_in)
on CodePen.
Author: Colin Espinas @Call_in
Links: Source Code / Demo
Created on: AUGUST 12, 2019
Made with: HTML(Pug), CSS
42. Weather widget
See the Pen
Weather widget by Tom Lutzenberger (@tomlutzenberger)
on CodePen.
43. Weather Widgets
See the Pen
Weather Widgets by Alberto Jerez (@ajerez)
on CodePen.
Author: Alberto Jerez @ajerez
Links: Source Code / Demo
Created on: APRIL 1, 2015
Made with: HTML, CSS(SCSS)
44. Weather Widget with CSS and SVG: Raining
See the Pen
Weather Widget with CSS and SVG: Raining by Naila Ahmad (@nailaahmad)
on CodePen.
Author: NAILA AHMAD @nailaahmad
Links: Source Code / Demo
Created on: APRIL 20, 2016
Made with: HTML, CSS(SCSS), JS
45. Animated weather icons
See the Pen
Animated weather icons by Wael Yasmina (@WaelYasmina)
on CodePen.
Author: Wael Yasmina @WaelYasmina
Links: Source Code / Demo
Created on: AUGUST 5, 2017
Made with: HTML, CSS
46. Weather Widgets
See the Pen
Weather Widgets by Alex (@meness)
on CodePen.
Author: Alex @meness
Links: Source Code / Demo
Created on: February 28, 2028
Made with: HTML(Haml), CSS
47. Flat UI Forecast Widget
See the Pen
Flat UI Forecast Widget by Brady Sammons (@soulrider911)
on CodePen.
Author: Brady Sammons @soulrider911
Links: Source Code / Demo
Created on: JANUARY 3, 2014
Made with: HTML, CSS(SCSS), JS
48. Weather Icon Showcase | Pug, SCSS
See the Pen
Weather Icon Showcase | Pug, SCSS by Ayla (@sharedbyayla)
on CodePen.
Author: Ayla @sharedbyayla
Links: Source Code / Demo
Created on: MARCH 10, 2021
Made with: HTML(Pug), CSS(SCSS)
49. Minimalist Clock/Weather Widget
See the Pen
Minimalist Clock/Weather Widget by Ty Stelmach (@TyStelmach)
on CodePen.
Author: Ty Stelmach @TyStelmach
Links: Source Code / Demo
Created on: JULY 23, 2015
Made with: HTML, CSS, JS
50. Flat Weather Notice Cards
See the Pen
Flat Weather Notice Cards by Evan Wieland (@EvanWieland)
on CodePen.
Author: Evan Wieland @EvanWieland
Links: Source Code / Demo
Created on: FEBRUARY 7, 2015
Made with: HTML(Pug), CSS(Sass)
51. Weather card
See the Pen
Weather card by Parth (@thecodingaviator)
on CodePen.
Author: Parth @thecodingaviator
Links: Source Code / Demo
Created on: SEPTEMBER 27, 2018
Made with: HTML, CSS(SCSS), JS
52. Weather Widget
See the Pen
Weather Widget by BJack (@BJack)
on CodePen.
Author: BJack @BJack
Links: Source Code / Demo
Created on: DECEMBER 29, 2013
Made with: HTML, CSS
53. Local Weather App – openweather API
See the Pen
Local Weather App – openweather API by Greg (@wearegroot)
on CodePen.
Author: Greg @wearegroot
Links: Source Code / Demo
Created on: JANUARY 23, 2016
Made with: HTML, CSS
54. Interactive Weather Widget
See the Pen
Interactive Weather Widget by Dmitry Sharabin (@dmitrysharabin)
on CodePen.
Author: Dmitry Sharabin @dmitrysharabin
Links: Source Code / Demo
Created on: APRIL 14, 2019
Made with: HTML, CSS
55. Yet Another Weather Widget
See the Pen
Yet Another Weather Widget by Nina Alice (@aliceinninaland)
on CodePen.
Author: Nina Alice @aliceinninaland
Links: Source Code / Demo
Created on: DECEMBER 23, 2016
Made with: HTML, CSS
56. Responsive Weather Widget
See the Pen
Responsive Weather Widget by WeatherWidget.io (@weatherwidget)
on CodePen.
Author: WeatherWidget.io @weatherwidget
Links: Source Code / Demo
Created on: AUGUST 2, 2017
Made with: HTML, CSS
57. Weather With Boostrap and Scss
See the Pen
Weather With Boostrap and Scss by Camila L. Oliveira (@clcmo)
on CodePen.
Author: Camila L. Oliveira @clcmo
Links: Source Code / Demo
Created on: JUNE 11, 2020
Made with: HTML(Pug), CSS(SCSS)
58. Weather Widget
See the Pen
Weather Widget by Paul Navasard (@peanav)
on CodePen.
Author: Paul Navasard @peanav
Links: Source Code / Demo
Created on: FEBRUARY 24, 2014
Made with: HTML, CSS, JS
59. Hexagon Weather Widgets
See the Pen
#codevember 07-2016 <Hexagon Weather Widgets> by James Fleeting (@fleeting)
on CodePen.
Author: James Fleeting @fleeting
Links: Source Code / Demo
Created on: NOVEMBER 8, 2016
Made with: HTML, CSS(PostCSS)
60. Weather Widgets
See the Pen
Weather Widgets by Henry Arbolaez (@henryarb92)
on CodePen.
Author: Henry Arbolaez @henryarb92
Links: Source Code / Demo
Created on: DECEMBER 4, 2015
Made with: HTML, CSS(SCSS), JS
