← All elements
<div class="wf"><div class="sun"></div><div class="cl"></div><b>24°</b><span>Partly sunny</span><ul><li>Tue<em>26°</em></li><li>Wed<em>22°</em></li><li>Thu<em>19°</em></li></ul></div>About this card
A weather tile with a CSS sun and cloud, a large temperature and a small three-day outlook.
How it works
The sun is a yellow circle with two layered shadow rings, and the cloud is a pill with a round pseudo-element for the bump. A top border separates the three-day list, which is laid out with flexbox.
Ways to customise it
- Change the gradient for night colours.
- Edit the temperatures and days.
- Add a rain effect with small animated lines.
Good to know
Include the condition as text, not only as an icon. These graphics are decorative and not read by assistive technology.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.