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

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

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

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

4. Weather App

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

5. Weather Widget App with Open Weather API

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

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

7. Animated Weather Cards

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

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

9. Weather card

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

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

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

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

13. Get Weather

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

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

15. CSS Weather Animation

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

16. CSS3 Weather Widget

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