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
ADVERTISEMENT
7. Animated Weather Cards
ADVERTISEMENT
ADVERTISEMENT
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.
ADVERTISEMENT
8. Simple Weather App Design
ADVERTISEMENT
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