Collection of hand-picked free HTML and CSS weather widget code examples. Update of December 2018. 6 new items.

Related Articles

  1. Bootstrap Weather Widgets
  2. jQuery Weather Widgets
  3. Tailwind Weather Widgets
Demo image: Neumorphism Weather App

Author

  • Travis Williamson

Links

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism Weather App

HTML and CSS rendition of a Neumorphism weather mobile application.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Sabine Robart

Links

Made with

  • HTML / CSS (SCSS)

About a code

Weather App

App UI design prototype - moon, rain, info card, CSS3 translate animation, hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Weather Widget UI

Author

  • Amit Soni

Links

Made with

  • HTML / CSS

About the code

Weather Widget UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Weather Widget

Author

  • Evan Peterson

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Weather Widget

Simple weather widget in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Daniel Boothman

Links

Made with

  • HTML / CSS

About a code

CSS Weather Animation

CSS weather animation made in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Weather Widget

Author

  • Tom Lutzenberger

Links

Made with

  • HTML / CSS (Less)

About a code

Weather Widget

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, meteocons.css

Demo image: Weather Widget with CSS and SVG: Raining Weather Widget with CSS and SVG: Raining - GIF Demo

Author

  • Naila Ahmad

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Weather Widget with CSS and SVG: Raining

Trying CSS animation for SVG clouds for weather widget.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Weather Card using FlexBox

Author

  • Aditya Bhandari

Links

Made with

  • HTML / CSS (SCSS)

About the code

Weather Card using Flexbox

A sample weather widget design implemented using flexbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: weather-icons.css

Demo image: Weather Widget Weather Widget - GIF Demo

Author

  • Aritha

Links

Made with

  • HTML / CSS

About the code

Weather Widget

A weather widget with subtle animations done using pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Weather Widgets Weather Widgets - GIF Demo

Author

  • Alireza

Links

Made with

  • HTML (Haml) / CSS

About the code

Weather Widgets

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Weather Widgets Weather Widgets - GIF Demo

Author

  • Alberto Jerez

Links

Made with

  • HTML / CSS (SCSS)

About the code

Weather Widgets

CSS only weather widgets.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Weather Popup/Widget

Author

  • Bradley Treweek

Links

Made with

  • HTML / CSS

About the code

Weather Popup/Widget

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: weather-icons.css

Demo image: Flat Weather Notice Cards Flat Weather Notice Cards - GIF Demo

Author

  • Evan Wieland

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Flat Weather Notice Cards

Pure CSS3 and HTML5 animated weather notice cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Weather Icon Animation

Author

  • Derek Palladino

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Weather Widget Icon Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS3 Weather Widget

Author

  • Lennart Hase

Links

Made with

  • HTML (Haml) / CSS

About the code

CSS3 Weather Widget

Weather widget in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Weather Widget

Author

  • BJack

Links

Made with

  • HTML / CSS

About a code

Weather Widget

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css