60+ CSS Weather Icon, Widget, Designs

CSS Weather Icon, Widget, Designs – Are you looking for CSS Weather Icon, Widget, Designs, If yes then in this post I am going to share hand-picked CSS Weather Icon, Widget, Designs for you. If you want to share weather updates on your website then you can integrate these jQuery Weather Plugins. Displaying weather forecasts on the website is an interactive way to increase the interaction and average session duration of the visitors. You can use these CSS Weather Icon, Widget, Designs in your next web based projects.

CSS Weather Icon, Widget, Designs

Following are the list of CSS Weather Icon, Widget, Designs.

Animated Weather Icons DEMO

  Animated Weather Icons

Based on dribbble shot https://dribbble.com/shots/2097042-Widget-Weather by kylor – By joshbader

Animated Weather Cards DEMO

  Animated Weather Cards

Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state. – By ste-vg

Get Weather DEMO

  Get Weather

The Weather – By socrates

Weather Widget DEMO

  Weather Widget

Hey guys! This was a little pen I made just playing around with Open Weathers API! Decided to make a simple weather widget! Hope you guys like it! – By Jackthomsonn

Weather Widgets DEMO

  Weather Widgets

CSS only Weather Widgets Inspiration: http://drbl.in/olwj – By ajerez

CSS3 animated weather icons DEMO

  CSS3 animated weather icons

CSS3 animated weather icons Inspired by Mark Geyer’s [GIF] Weather at: http://dribbble.com/shots/1389791–GIF-Weather – By motorlatitude

Weather App DEMO

  Weather App

This is a weather application built with JavaScript as part of the Free Code Camp curriculum – By ayoisaiah

Authentic Weather Loader DEMO

  Authentic Weather Loader

Loading animation for the new Authentic Weather website ~ http://authenticweather.com – By tholman

Weather Dashboard by STUDIOJQ DEMO

  Weather Dashboard by STUDIOJQ

All credits to Jonathan Quntin STUDIOJQ i’m only the bored dude who coded it =) – By creme

simpleWeather.demo.js DEMO


Sample usage for the simpleWeather plugin. http://simpleweatherjs.com – By fleeting

CSS-only Weather App Concept DEMO

  CSS-only Weather App Concept

Dribbble rework of an original shot by Sergey Valiukh. – By davidkpiano

Weather App DEMO

  Weather App

Weather application with jQuery, and javascript. – By Lunnaris

Weather App! DEMO

  Weather App!

Weather App using real data from Open Weather Map api! – By mattgreenberg

Local Weather App DEMO

  Local Weather App

Local Weather App for the Freecodecamp challenge. – By jdtadlock

Weather Widget DEMO

  Weather Widget

A small widget to show the current weather conditions and a three day forecast. – By peanav

Weather Popup/Widget DEMO

  Weather Popup/Widget

a weather popup/widget inspired from: https://dribbble.com/shots/636796-Weather-Pop-up – By cmd430

fcc-weather DEMO


– By huluoyang

Vue Weather Notifier DEMO

  Vue Weather Notifier

A little weather notifier app to show SVG animation and vuex with templates. The code is a little different in codepen, you can see it all how it would be set up for an app in this repo: https://github.com/sdras/vue-weather-notifier – By sdras

VueJS Weather Widget DEMO

  VueJS Weather Widget

Weather widget used Vue.js 2 and Yahoo Weather APIs – By robinhuy

Weather App DEMO

  Weather App

A simple weather app using simpleweather.js, for my freecodecamp project. All icons from http://ionicons.com – By imtoobose

AngularJS weather app DEMO

  AngularJS weather app

Simple AngularJS weather application that uses OpenWeather API. Further source at https://github.com/kvitsux/ang-weather – By kvitsux

Weather App, built with jQuery and Yahoo Weather API (4 color schemes) ⭐ DEMO

  Weather App, built with jQuery and Yahoo Weather API (4 color schemes) ⭐

Hello, This is my Weather Application for freeCodeCamp Portfolio. The Default Location is set to London but you can change it in the settings menu! It was built with jQuery and the Weather API from Yahoo to retrieve the data in a JSON format. – By tns301

Weather App DEMO

  Weather App

Created for a FreeCodeCamp project and as part of my #100DaysOfCode challenge. This app uses the Wunderground API and the set of pure CSS weather icons I created, which can be found here: https://codepen.io/tiffanyadu/pen/OprNrV – By tiffanyadu

Local Weather DEMO

  Local Weather

FreeCodeCamp: Local Weather App – By rubenribeiro

simpleWeather.geolocation.js DEMO


Full docs at http://simpleweatherjs.com – By fleeting

City Widget DEMO

  City Widget

Original design from dribbble: http://drbl.in/jGgT Uses weather API to grab weather info. Nav buttons are also functional. – By drehimself

Weather Demo DEMO

  Weather Demo

Quick weather demo using the awesome SimpleWeather.js plugin. http://simpleweatherjs.com/ – By ehermanson

Show Weather powered by Dark Sky Forecast API DEMO

  Show Weather powered by Dark Sky Forecast API

Shows current weather in your area. – By Womperdev

Photo Integrated Weather App DEMO

  Photo Integrated Weather App

Detects your location based on IP address, queries the weather and returns the weather report with a random nearby image matching the current weather tag. – By AdventureBear

Flat Weather Notice Cards DEMO

  Flat Weather Notice Cards

Pure CSS3 and HTML5 animated weather notice cards. Original art by Fabrizio Bianchi. – By EvanWieland

Responsive Weather Widget DEMO

  Responsive Weather Widget

A demo of how the weather widgets generated at WeatherWidget.io automatically respond to fill their container. – By weatherwidget

Local Weather App DEMO

  Local Weather App

Local weather app created for freeCodeCamp. – By thalpha

Weather Widget DEMO

  Weather Widget

A simple current weather widget and current time and date feature. Designed inspired by EZ Weather App Skin. – By ChynoDeluxe

Local Weather App – FCC DEMO

  Local Weather App - FCC

It shows current local weather based on latitude and longitude. It informs current temperature, weather, wind speed and so on…….. – By rameshsyn

Weather widget DEMO

  Weather widget

Starting from a still image as inspiration http://dribbble.com/shots/1145537-Plug-In1 i combined it with http://openweathermap.org/ free api – By eltonkamami

Yet Another Weather Widget DEMO

  Yet Another Weather Widget

Free Code Camp’s “Show the Local Weather” project. Any comments or suggestions much appreciated! – By aliceinninaland

Weather Pane DEMO

  Weather Pane

A panel to show the weather in a specific area. Design based on this Dribbble shot [https://dribbble.com/shots/1081917-WhereTO-App] from Tiberiu Neamu. – By chrishutchinson

Weather App [FreeCodeCamp] DEMO

  Weather App [FreeCodeCamp]

This pen is a simple weather app designed for the freecodecamp.com project “Show the Local Weather”. It utilizes the OpenWeatherMap API. – By JayV30

Show the Local Weather DEMO

  Show the Local Weather

Note: Probably won’t work if you’re using a VPN. Refactored and improved. Geolocation is faster and more accurate. Updated with the latest version of Weather Icons. Wind direction is now perfect to the degree. – By denmch

Local Weather App DEMO

  Local Weather App

freecodeCamp project – Shows the the weather of the current user. – By tiagovalverde

FCC: Local Weather App DEMO

  FCC: Local Weather App

FCC challenge: http://www.freecodecamp.com/challenges/show-the-local-weather Fetches local IP & weather data via – By cfleschhut

Circular Calendar Display DEMO

  Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups. – By mattjuggins

Local Weather App – openweather API DEMO

  Local Weather App - openweather API

Zipline Project at FreeCodeCamp – uses openweather.org API to retrieve weather data base on the users location – By wearegroot

Material Weather Widget with Moment.js DEMO

  Material Weather Widget with Moment.js

CodePen demo for: http://kyusuf.com/post/material-weather-widget-with-moment-js – By KenanYusuf

App Icon – Weather DEMO

  App Icon - Weather

App Icon – Weather – By nicolazj

Local Weather DEMO

  Local Weather

A pen that displays the local weather for the user, using these APIs and Libraries: Bootstrap, jQuery, Google Material Design Lite, OpenWeatherMap’s Current weather API, and Erik Flowers’ Weather Icons – By Damon-Myers

Weather App DEMO

  Weather App

A simple local weather app. – By akashvevo

Local Weather App v1.0 DEMO

  Local Weather App v1.0

Developed for the freeCodeCamp Intermediate Front-end Development Challenge: Show the Local Weather. Details: http://www.freecodecamp.com/challenges/show-the-local-weather – By TylerMoeller

Simple Weather App DEMO

  Simple Weather App

– By jasonchan

simpleWeather.minimum.js DEMO


Bare minimum example for simpleWeather. Full docs at http://simpleweatherjs.com – By fleeting

Minimalist Clock/Weather Widget DEMO

  Minimalist Clock/Weather Widget

Lost interest, may revisit eventually. Uses JS/css transforms to align the clock hands and weather api with angular for the current/local weather – By TyStelmach

AngularJS Weather App DEMO

  AngularJS Weather App

Uses Angular, Weather Icons and Open Weather Map API to create a simple weather card, initially based on user location, but can be over-ridden by the input below. – By nickmoreton

Weather Widget with CSS and SVG: Raining DEMO

  Weather Widget with CSS and SVG: Raining

Trying CSS animation for SVG clouds for weather widget – By nailaahmad

Weather card DEMO

  Weather card

A simplistic, minimalist weather card! – By thecodingaviator

Analog Weather App DEMO

  Analog Weather App

Re-created a dribbble by Max Shakurov in HTML/CSS. – By birjolaxew

Free Code Camp Weather App DEMO

  Free Code Camp Weather App

– By awalthefirst

Show Me The Weather DEMO

  Show Me The Weather

A weather widget written in vanilla JavaScript – implemented as a traditional prototype class. It shows a weather condition icon, degrees in Celsius or Fahrenheit and the city location, using the Yahoo! Weather API. – By camlcase

Weather DEMO


– By biancamihai

Weather Forecast DEMO

  Weather Forecast

Local Weather Forecast. Weather data for today and upcoming days is presented based on geographic IP address. Depending on the forecast temperature, the gradient will switch from warm to cold colors. The background image behind the gradient will change depending on the weather status (clear, clouds, rain) – By Tbgse

some weather icon svgs DEMO

  some weather icon svgs

– By n-sayenko

I Hope you liked Hand-picked list of CSS Weather Icon, Widget, Designs, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.