Collection of free HTML and CSS weather widget code examples.

10 CSS Weather Widgets

Collection of hand-picked free HTML and CSS weather widget code examples.

Related Articles

  1. CSS Weather Icons

Demo image: Weather Widget UI

Author

  • Amit Soni

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

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: -

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

Author

  • Naila Ahmad

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

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

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

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

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

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

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: CSS3 Weather Widget

Author

  • Lennart Hase

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: -

back to top