How to create an iOS style Weather app icon using just HTML & CSS - For beginners and intermediate

Опубликовано: 14 Июнь 2026
на канале: Arun Puthiyidath
54
2

An iOS Weather app icon consists of three main components. A sky-like background, a sun, and a cloud.
The sun is a circular div with a yellow-orange linear-gradient background
The cloud is a combination of three shapes managed to create from a single div itself using the :before and :after pseudo-classes.
Pause the video and have a close look at the CSS to see how I managed to draw this out.

Enjoy!