Yesterday in a technical group, an interesting question arose: How does Leaflet's official website achieve its smooth leaf logo color transition? While initially assuming it was a GIF animation, closer inspection revealed a more elegant solution.

Initial Investigation

Developer tools showed the logo is a static PNG with a green base:

CSS vs. JavaScript?

The effect triggers when hovering anywhere within the header area, not just the logo:

Implementation Breakdown

The color transition is achieved through CSS filters and transitions:

/ Header container rule /
.site-header {
  transition: filter 0.5s ease;
}

/ Hover effect /
.site-header:hover {
  filter: hue-rotate(40deg) saturate(180%);
}

Key Properties Explained:

  1. filter: hue-rotate()
    Shifts all colors by rotating the hue circle (40° = green→yellow)
  2. filter: saturate()
    Increases color intensity (180% = more vibrant yellows)
  3. transition
    Animates property changes over 0.5 seconds with easing

Browser Compatibility:

  • Works in Chrome/Firefox/Edge (modern browsers)
  • Not supported in Internet Explorer

Why This Approach?

  1. Performance: CSS hardware acceleration outperforms GIF/JavaScript
  2. Flexibility: Easily adjustable color shifts via CSS values
  3. File Size: Single PNG (3KB) vs. multi-frame GIF (50KB+)
View live implementation: Leaflet Official Header