css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

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


  1. That just haa to get showcased on some weather forecast website...

  2. Yeah that's cool. It's not fully responsive. How coul you make it smaller or bigger, based on width screen size ?

  3. Wait :) Actually if you change all REM value in VW you have a fully responsive weather icons. Nice job I LOVE AND SHARE

  4. @demontib87, I noticed the same thing, so I changed all of the rem units to em units. Now if you set the font-size of the icon element, it will change its size (you can use vw for a scaleable icon or px, rem, and em for a static size of your choosing). I had to make a few other changes to fix the positioning of some elements like the lightning bolts, snow flakes, and drifting cloud.

  5. How does one create 4 instances of a raindrop with single :before pseudo-element? All I could find is that the"rain" animation somehow duplicated raindrop, but how?

  6. @f3lko, box-shadow my friend, box-shadow.

  7. This is amazing!! Is there any chance you could do a moon? :P I tried but I can't :(

  8. Beautiful icons. Great work. Any chance of seeing wind? :P

  9. Hey Josh,

    This is some outta this world CSS. I'm learning web development currently, what learning techniques would you recommend?

  10. @ali-ahmad to be honest, I'm mostly self-taught. In my early years of learning CSS, @chriscoyier's CSS-Tricks was extremely helpful. Understanding a few basics (ie. borders, box-shadows, and pseudo elements) can get you pretty far. You just have to think a little outside the box and be a bit creative with how you use them. Try and break down what you are building into simple shapes that can be made with CSS, and try not to overextend yourself with something to complex. Understanding that CSS is really good and making basic primitives (ie. squares, circles, and triangles) is key.

  11. What about fog/haze/smoke? I am trying to implement this with a weather API and I am not sure how to make this work.

  12. @joshbader, You are AMAZING! Thanks so much

  13. @joshbader ,

    Great work man!

    Used your icons but added some color and other things:


    Question, possible to adjust the circle of the moon to something like a "crescent" shape?

  14. Hi josh.
    Congrats for your work! Im going to use your icons for my new weather website. Can i combine your moon and your cloud to make a "partly cloudy night". Thanks :)

  15. @dimitris-pantioras Of course. I'd love to see the work when finished. Enjoy.

  16. Hi again Josh! One more question: Are these icons responsive? If yes, how they become?

  17. @dimitris-pantioras, I made them adjustable via their font-size. Larger font-size, larger icons.

  18. Hey Josh, I'm viewing this pen in firefox and it's sadly not looking as cool as it does on chrome.

    Do you have any clue why there is a difference?


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.