CSS Color Transitions for Link Hover and Focus

A CSS color transition can make a link change color gradually instead of switching instantly. It needs no JavaScript, but it should work for keyboard users, respect reduced-motion preferences, and keep links distinguishable without relying on color alone.

In a theme I made for Super Dev Resources, I used a soft color transition for post-title links.

CSS color transition for link hover and keyboard focus

Add the soft-link class to the anchors you want to animate, and keep each link's real href unchanged.

Then define the transition on the link's default state. This lets the color animate both when the pointer enters and when it leaves:

.soft-link {
  color: #075985;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  transition: color 180ms ease;
}

.soft-link:hover,
.soft-link:focus-visible {
  color: #0b3b5a;
}

.soft-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .soft-link {
    transition: none;
  }
}

The transition changes only color, rather than all, so unrelated properties do not animate unexpectedly. The :focus-visible state gives keyboard users the same color change and a visible outline. The underline remains in every state, so the link is not identified by color alone.

The sample colors are dark blue shades chosen for a light background. Check the contrast of both colors against the actual background in your design, and adjust them for dark surfaces. WCAG guidance calls for at least 4.5:1 contrast for normal-sized text; a transition should not pass through hard-to-read colors either.

Motion and browser support

The prefers-reduced-motion media query removes the animation for visitors who request less motion. The link still changes color, just without a transition. Modern browsers support CSS transitions and :focus-visible; if a browser does not support transitions, the link remains usable and switches color immediately. Vendor-prefixed transition declarations are not needed for current browsers.

The original CodePen demonstrates the soft color-change effect:

See the Pen Soft color animation on Link Hover by Kanishk Kunal on CodePen.

CSS color transition for link hover and keyboard focus

Motion and browser support

Further reading