Multi-line gradient links

Zell Liew deconstructed and recreated the gradient links as seen on CSS-Tricks

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.

The result looks like this:

Uses the aforementioned box-decoration-break to span styles across multiple lines along with text-decoration-color to tweak the color of the line below the link.

.gradient-text {
  background: linear-gradient(120deg, #ab4e19, #c99a2e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  text-decoration-color: #ab4e19;
}

Multi-line gradient links →

text-decoration-* CSS Properties Coming to Firefox

Glad to see this announcement by Mozillian Daniel Holbert:

As of today (Sept 12 2019), I’ve turned on support for the CSS properties text-decoration-skip-ink, text-decoration-thickness, and text-underline-offset, on all platforms.

As posted before, text-decoration-skip-ink gives you nicer underlines. The other two properties allow one to tweak the position and color of the underline. CSS Tricks recently published a good post on how to use them.

The features are now in Nightly and will be included in Firefox 70 🙂

“Intent to ship” Announcement →
Nicer CSS underlines with text-decoration-skip-ink: auto;
Styling Links with Real Underlines →