← All elements
<div id="leaves">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>About this animation
Green leaves skewed from rounded boxes tumble down a dark page at different speeds and angles.
How it works
Fifteen leaf shapes are rounded boxes with a skew and a green gradient. Three keyframes with different paths are assigned with nth-of-type rules, so the leaves drift at different angles and speeds. They fall inside a container that is wider than the frame.
Ways to customise it
- Change the green gradient.
- Edit the three falling paths in the keyframes.
- Add more i elements for a thicker shower.
Good to know
The animation uses -webkit- prefixes, which all current browsers still support. It is decorative and should respect reduced motion if used on a content page.
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.