10 CSS Weather Widgets
Collection of hand-picked free HTML and CSS weather widget code examples.
About the code
Weather Widget UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
CSS Weather Widget
Simple weather widget in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
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: -
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
About the code
Weather Widget
A weather widget with subtle animations done using pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Weather Widgets
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
About the code
Weather Widgets
CSS only weather widgets.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Weather Popup/Widget
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: weather-icons.css
About the code
Flat Weather Notice Cards
Pure CSS3 and HTML5 animated weather notice cards.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
CSS3 Weather Widget
Weather widget in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
