20+ CSS Weather Widgets - Free Code + Demos
Collection of 20+ CSS Weather Widgets. All items are 100% free and open-source.
1. Weather Widget UI
Author: Amit Soni (amit7soni)
Links: Source Code / Demo
Created on: September 1, 2018
Made with: HTML, CSS
2. Weather Widget
Author: Evan Peterson (evanjpeterson)
Links: Source Code / Demo, Dribbble.com
Created on: July 22, 2018
Made with: HTML, SCSS
3. Weather Widget With CSS And SVG: Raining
Trying CSS animation for SVG clouds for weather widget
Author: Naila Ahmad (nailaahmad)
Links: Source Code / Demo
Created on: April 19, 2016
Made with: HTML, SCSS, JS
Tags: svg, css, animation, weather-widget
4. Weather Card Using FlexBox
A sample weather widget design implemented using FlexBox.
Author: Aditya Bhandari (takeradi)
Links: Source Code / Demo
Created on: February 27, 2016
Made with: HTML, SCSS
Tags: widget, card, purecss, css, weather
5. Weather Widget
A weather widget with subtle animations done using pure CSS. Enjoy! :)
Author: Aritha (aritha)
Links: Source Code / Demo, Dribbble Shot
Created on: October 22, 2015
Made with: HTML, CSS, JS
Tags: weather, widget, animation, orange, sunny
6. Weather Widgets
Stylish and modern weather widgets which designed by Soumya Ranjan Bishi and developed in pure-CSS with a beautiful animation for weather icons.
Author: Alireza (meness)
Links: Source Code / Demo
Created on: April 1, 2015
Made with: Haml, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: pure-css, weather, stylish, modern, animation
7. Weather Widgets
CSS only Weather Widgets Inspiration: http://drbl.in/olwj
Author: Alberto Jerez (ajerez)
Created on: April 1, 2015
Made with: HTML, SCSS, JS
Tags: css-only, weather, widget, frontend
8. Weather Popup/Widget
a weather popup/widget inspired from: https://dribbble.com/shots/636796-Weather-Pop-up
Author: Bradley Treweek (cmd430)
Links: Source Code / Demo, Dribbble Shot
Created on: March 16, 2015
Made with: HTML, CSS, JS
Tags: weather, popup, widget
9. Flat Weather Notice Cards
Pure CSS3 and HTML5 animated weather notice cards. Original art by Fabrizio Bianchi.
Author: Evan Wieland (EvanWieland)
Links: Source Code / Demo
Created on: February 6, 2015
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: weather, flat, css, cards, notice
10. CSS3 Weather Widget
Inspire By Winter by Chester.Fu
Author: Lennart Hase (motorlatitude)
Links: Source Code / Demo, Dribbble Shot
Created on: May 25, 2014
Made with: Haml, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: haml, css3, weather, widget, css
11. Interactive Weather Widget
Author: Dmitry Sharabin (dmitrysharabin)
Links: Source Code / Demo
Created on: April 14, 2019
Made with: HTML, CSS
Tags: mavo, widget, weather, api
12. Weather Widget
Forked from BJack's Pen Weather Widget.
Author: Deepak (dkafle)
Links: Source Code / Demo
Created on: June 30, 2014
Made with: HTML, CSS
Tags: css3, animations, weather, widget
13. Weather Widget
Use-case for meteocons.css https://tomlutzenberger.github.io/meteocons.css/
Author: Tom Lutzenberger (tomlutzenberger)
Links: Source Code / Demo
Created on: May 24, 2016
Made with: HTML, Less
Tags: widget, font-icon, meteocons, css, _publish_website
14. Weather Widget
DevWarsWeek3 - Weather Component using Angular
Author: Cindy (sceendy)
Links: Source Code / Demo
Created on: July 23, 2015
Made with: HTML, Sass, JS
Tags: devwarsweek3, sass, weather, jade, angular
15. CSS Weather Widget
A demo of how the weather widgets generated at WeatherWidget.io automatically respond to fill their container.
Author: WeatherWidget.io (weatherwidget)
Links: Source Code / Demo
Made with: HTML, CSS, JS
16. Weather With Boostrap And Scss
Weather with Bootstrap, scss and I`ll work to send the weather of São Paulo in real time
Author: Camila Oliveira (clcmo)
Links: Source Code / Demo
Created on: June 11, 2020
Made with: HTML, SCSS
Tags: bootstrap, scss, weather, json
17. Weather Widget
Author: Titko (titkoTitev)
Links: Source Code / Demo
Created on: May 7, 2016
Made with: HTML, CSS, JS
18. Weather Widget
A small widget to show the current weather conditions and a three day forecast.
Author: Paul Navasard (peanav)
Links: Source Code / Demo
Created on: February 23, 2014
Made with: HTML, CSS, JS
Tags: weather, forecast
19. Local Weather Widget
Author: Seniorkae (seniorkae)
Links: Source Code / Demo
Created on: April 28, 2017
Made with: HTML, CSS, JS
More Awesome Lists:
Share: