Using CSS Color-Mix() to lower anchor underline opacity

A tiny code sample showing how to use the CSS color-mix function with currentColor to automatically lower the opacity of anchor underlines.

We can use CSS color-mix to mix two colors and get a new color. The currentColor property holds the selected elements color value.

Let’s combine them.

a {
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

Useful when you just want slightly nicer looking links.

Keep in mind that lowering the opacity too much will result in accessibility issues.