15+ CSS Weather Widgets [ Code + Demo ]

Hello there! In this article, you will find 15+ CSS Weather Widgets designs with complete source code so you can copy and paste it into your project.

A weather widget can display the current weather, the forecast for the next few days, or both the current weather and forecast. Need a weather widget for your project? Don’t know how to make one?

Don’t worry we’ve got you covered. We have Handpicked the best weather widget designs from the web for you to use in your project.

In this blog post, we will discuss weather widgets with complete source code so you can just copy and paste them into your own project. Happy exploring and learning !!

Let’s see some cool 15+ weather widgets designs.

1. Weather Popup/Widget

Code by	Bradley Treweek
Demo & download	click here for code
Language used	HTML, CSS, JS
External link / Dependencies	No
Responsive	No

Let’s start kicking things off with a Weather widget developed by Bradley Treweek using HTML, and CSS. This is not a dynamic widget, it is just a static design inspired from here.

2. Local Weather App – open weather API

Code by	Greg
Demo & download	click here for code
Language used	HTML, CSS, JS
External link / Dependencies	Yes
Responsive	Yes

This widget was designed by Grey for FreeCodeCamp, it uses openweather.org API to retrieve the weather database on the user’s location.

3. Weather Widget UI

Code by	Amit Soni
Demo & download	click here for code
Language used	HTML, CSS
External link / Dependencies	Yes
Responsive	No

Another static weather widget was designed by Amit Soni using pure HTML, and CSS.

4. Weather App

Code by	Sabine Robart
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS
External link / Dependencies	Yes
Responsive	No

Weather App App UI design by Sabine Robart with Moon, rain, info card, css3 translate animation.

5. Weather Widget App with Open Weather API

Code by	myleschuahiock
Demo & download	click here for code
Language used	HTML, CSS, JS
External link / Dependencies	Yes
Responsive	No

The geo-location Weather widget by myleschuahiock, detects weather status, conditions, local time, temperature in (Celsius/Fahrenheit), wind speed, humidity, pressure, sunrise, and sunset. Allow Geo-location on the browser first.

Create Delete Button Animation Using HTML &CSS

6. Weather Widgets

Code by	Alberto Jerez
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS
External link / Dependencies	Yes
Responsive	Yes

A CSS-only Weather Widget by Alberto Jerez made using HTML, CSS, and JavaScript. Inspiration: dribbble

7. Animated Weather Cards

Code by	Steve Gardner
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS
External link / Dependencies	Yes
Responsive	No

The animated weather card by Steve Gardner was made using HTML, CSS(SCSS), and JavaScript. Seamless animation between states and some animations break outside the container. Select the weather icons on the top to see each state.

8. Simple Weather App Design

Code by	Colin Espinas
Demo & download	click here for code
Language used	HTML(Pug), CSS, JS
External link / Dependencies	Yes
Responsive	Yes

Simple weather widget by Colin Espinas, developed using HTML(Pug), CSS, and JavaScript.

9. Weather card

Code by	Parth
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS
External link / Dependencies	Yes
Responsive	Yes

A simplistic, minimalist weather card developed by Parth HTML, CSS(SCSS), and JavaScript. This is a dynamic widget, that enables location access to see your city’s weather.

10. Weather Widget – Static

Code by	Nerios Lamaj
Demo & download	click here for code
Language used	HTML, CSS, JS
External link / Dependencies	No
Responsive	No

A simple and basic weather widget by Nerios Lamaj, developed using HTML, CSS, and JavaScript.

How to make Floating Icon animation in HTML & CSS

11. Weather Forecast

Code by	Mohan Khadka
Demo & download	click here for code
Language used	HTML, CSS
External link / Dependencies	Yes
Responsive	Yes

The weather forecast designed by Mohan Khadka is based on HTML and CSS only. Click the cloud button to see more information.

12. Weather Widget

Code by	Aritha
Demo & download	click here for code
Language used	HTML, CSS, JS
External link / Dependencies	No
Responsive	No

A weather widget developed by Aritha with subtle animations done using pure CSS. Enjoy! 🙂

13. Get Weather

Code by	Socrates Nguyen
Demo & download	click here for code
Language used	HTML, CSS, JS
External link / Dependencies	Yes
Responsive	No

This weather widget by Socrates Nguyen made using HTML, CSS and JavaScript is a dynamic widget that fetches weather information through API.

14. Weather widget

Code by	Tom Lutzenberger
Demo & download	click here for code
Language used	HTML,CSS(Less)
External link / Dependencies	Yes
Responsive	Yes

A simple card-based widget designed by Tom Lutzenberger using HTML, and CSS(Less).

15. CSS Weather Animation

Code by	Daniel Boothman
Demo & download	click here for code
Language used	HTML, CSS
External link / Dependencies	No
Responsive	Yes

An Animated widget design by Daniel Boothman made using pure HTML, and CSS.

16. CSS3 Weather Widget

Code by	Lennart Hase
Demo & download	click here for code
Language used	HTML(Haml),CSS
External link / Dependencies	Yes
Responsive	No

Create Social Media Icon Using Html And Css (Source Code)

Let’s end today’s list with a weather widget by Lennart Hase made using HTML(Haml) and CSS.

That’s it, folks. In this article, we shared 15+ weather widgets with cool and different designs. We have covered a lot of different weather widgets from static widgets to dynamic widgets which show the weather of your location.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep learning!!

follow us on Instagram: @codewith_random
Written by: @ayushgoel