Hover color transition

Hover the inline link: chroma shifts toward the accent with a soft bottom border fade-in.

Need the full methodology? Read how we score supplier risk before you export the CSV.

Widely Supported

typographytransitiona11y

Quick implementation

a.muted-link {
  color: color-mix(in oklch, var(--fg) 88%, var(--accent));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
a.muted-link:hover,
a.muted-link:focus-visible {
  color: var(--accent);
  border-bottom-color: color-mix(in oklch, var(--accent) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  a.muted-link { transition: none; }
}

Prompt this to your LLM

Inline links in muted paragraphs.

You are styling inline links that sit inside muted body text.

Goal: Default state slightly blended toward accent; hover snaps to full accent with a thin bottom border fade.

Constraints:
- transition on color and border-color (~0.2s).
- prefers-reduced-motion: reduce removes transitions.

Return CSS for a.muted-link.

Why this matters in 2026

Micro-interactions on text reward exploration without layout thrash from scale transforms.

The logic

color interpolates cheaply; pairing border-color avoids adding layout for underlines.

Accessibility & performance

Include :focus-visible styles mirroring hover; respect reduced motion.