Lluvia ligera · Sensación 17°
HTML + CSSCards
Animated weather card
A small weather widget where clouds drift and rain falls in the background, with the next few hours below.
Settings
16px
1x
Code
<article class="uv-cweather"><div class="sky"><i></i><i></i><b style="--i:0"></b><b style="--i:1"></b><b style="--i:2"></b><b style="--i:3"></b><b style="--i:4"></b><b style="--i:5"></b><b style="--i:6"></b></div><header><span>Madrid</span><small>Now</small></header><strong>18°</strong><p>Light rain · Feels like 17°</p><footer><span>18:00 <b>17°</b></span><span>19:00 <b>16°</b></span><span>20:00 <b>15°</b></span></footer></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
A nice touch wherever the weather changes plans: the destination page of a travel agency, the booking site of a rural hotel, a surf school or an outdoor wedding venue. This animated weather widget shows temperature, conditions and an hourly forecast, with clouds and rain moving gently behind in CSS.
The scene always shows rain, so connect it to a weather API and add sunny or cloudy versions if you use it for real. As decoration on a landing page, slow the animation down; at full pace the rain can pull attention away from your headline.