You are currently viewing 15+ CSS Weather Widgets [ Code + Demo ]

15+ CSS Weather Widgets [ Code + Demo ]

Telegram Group Join Now

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

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

Telegram Group Join Now

Leave a Reply