← All elements
<div class="box-canvas">
<div class="cog cog-one">
<div class="teeth vertical"></div>
<div class="teeth horizontal"></div>
</div>
<div class="cog cog-two">
<div class="teeth vertical"></div>
<div class="teeth horizontal"></div>
</div>
<div class="cog cog-three">
<div class="teeth vertical"></div>
<div class="teeth horizontal"></div>
</div>
</div>About this animation
Two meshing gears, one grey and one copper, drawn with circles and rotated bars for the teeth, turning in opposite directions.
How it works
Each gear is a circle with an inner and outer ring, plus bars rotated into place for the teeth. Custom properties set the colours, sizes and start and end angles, so the two cogs turn in opposite directions and their teeth stay in step. A tilted layout places the smaller copper cog against the grey one.
Ways to customise it
- Change --cog-color and --cog-accent-color.
- Edit the inner and outer size variables.
- Change the rotation duration.
Good to know
Meshing gears are an easy way to show work in progress. The motion is decorative, so hide it from screen readers.
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.