Best 10 HTML5 and CSS Weather Widgets – Collection of hand-picked free HTML and CSS weather widget code examples.

WEATHER WIDGET UI

Author: Amit Soni

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

Dependencies: font-awesome.css

Demo and code

CSS WEATHER WIDGET

Simple weather widget in HTML and CSS.

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

Demo and code

WEATHER WIDGET WITH CSS AND SVG: RAINING

Trying CSS animation for SVG clouds for weather widget.

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

Demo and 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 and code

WEATHER WIDGET

A weather widget with subtle animations done using pure CSS.

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

demo and code

dribbble shot

WEATHER WIDGETS

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

Dependencies:font-awesome.css

Demo and code

WEATHER WIDGETS

CSS only weather widgets.

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

WEATHER POPUP/WIDGET

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

Dependencies:weather-icons.css

FLAT WEATHER NOTICE CARDS

Pure CSS3 and HTML5 animated weather notice cards.

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

CSS3 WEATHER WIDGET

Weather widget in HTML and CSS.

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

Categorized in:

HTML / CSS

Tagged in:

, , , , , , , , ,