Smooth Text Color Transition for Links and Headings

Transitioning Text Color

Text color transitions provide subtle but effective feedback on interactive text elements. They are most commonly used on links, navigation items, and labeled controls.

Basic Color Transition

.link {
  color: #a1a1aa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover {
  color: #3b82f6;
}

Link with Underline Color Sync

.link {
  color: #a1a1aa;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease,
              text-decoration-color 0.2s ease;
}

.link:hover {
  color: #3b82f6;
  text-decoration-color: #3b82f6;
}

Icon + Text Color Transition

When using an icon next to text, currentColor ensures both transition together:

.nav-item {
  color: #71717a;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: #3b82f6;
}

.nav-item svg {
  fill: currentColor;  /* Inherits the transitioned color */
}

Dark/Light Mode Transition

When implementing theme switching, transition the color property to avoid a jarring jump:

body {
  color: var(--text);
  background-color: var(--background);
  transition: color 0.3s ease, background-color 0.3s ease;
}

Performance

Text color transitions trigger a repaint but not a layout change. The cost is minimal because the browser only needs to re-render the text glyphs with the new color. This makes color transitions practical for large numbers of elements (e.g., entire navigation menus).