Welcome to our collection of CSS weather widgets! This is a curated selection of free HTML and CSS weather widget code examples from various resources like CodePen, GitHub, and others. This collection has been updated as of February 2021, and we’re thrilled to announce that it now includes 6 new items!

CSS weather widgets are small standalone applications that display the current weather conditions using beautiful and dynamic icons and graphics.

Using CSS for creating weather widgets offers several benefits:

  • customizability: you can easily customize the size, color, and other properties of the widgets to match your website’s design.
  • scalability: CSS widgets scale without losing quality, making them ideal for responsive web design.
  • performance: as they are part of the code, they load faster than image-based widgets.

Our collection features a variety of creative and visually appealing weather widgets. Whether you’re looking for a minimalist design or something more intricate, you’re sure to find a widget that suits your needs. Each widget in our collection comes with its own HTML and CSS code example, making it easy for you to incorporate it into your project.

We hope you find this collection useful for your web development projects. Happy coding!

Related Articles

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

Author

  • Travis Williamson

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

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

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

Author

  • Daniel Boothman

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

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

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: CSS Weather Icon Animation

Author

  • Derek Palladino

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

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

Made with

  • HTML / CSS

About a code

Weather Widget

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

Responsive: no

Dependencies: font-awesome.css