Multi-line gradient links

Zell Liew 🤗 - Jan 29 '20 - - Dev Community

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.

That's what I did for Learn JavaScript's course portal. The links look like this:

Blue color link with blue underline. When hovered, the text has an orange to yellow gradient; underline becomes solid orange.

I want to share what I learned about creating gradient links

Creating Gradient Text

Chris Coyier wrote an article on creating gradient text back in 2012. The article is old, but it's still valid. He gave the following snippet in the article:

.gradient-text {
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

linear-gradient is now supported across all browsers. We don't need to add the -webkit prefix anymore. The code shortened can be shortened to:

.gradient-text {
  background: linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Text with vertical gradient. From light gray at the top to dark gray at the bottom.

Creating a slanted gradient

We can provide an angle to linear-gradient to change the angle of the gradient. After playing around for a bit, I decided to use 120deg as the angle.

.gradient-text {
  background: linear-gradient(120deg, #ab4e19, #c99a2e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Text with linear gradient set to 120 degrees.

Multi-line gradient text

The snippet above supports multi-line gradient text on Chrome, Firefox, and Edge. But it doesn't work on Safari. Text that goes into the second (or later) rows become completely transparent.

Second row of text on Safari is transparent.

I didn't understand why, so I inspected the links on CSS Tricks. I noticed they used a box-decoration-break property. The multiline gradient text works on Safari after I set box-decoration-break to clone.

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

Gradient text on safari fixed.

Underlines

Links should have underlines. The underlines make it obvious that links are links.

I tried putting the .gradient-text snippet onto links, but I discovered there weren't any underlines.

Gradient text on safari fixed.

Why?

I dug around and realised that -webkit-text-fill-color changes the text-decoration-color. When we set -webkit-text-fill-color to transparent, we also set text-decoration-color to transparent.

Textsfill-color: transparent set text decoration color to transparent as well

So the easiest way to bring back the underline is to change text-decoration-color.

a {
  background-image: linear-gradient(120deg, #ab4e19, #c99a2e);
  text-decoration-color: #ab4e19;
  /*...*/
}
Enter fullscreen mode Exit fullscreen mode

Set text decoration color to orange.

Gradient underlines

I thought about creating a gradient underline since the text contains a gradient. Unfortunately, it's not possible. 😢.

You can only create gradient underlines with background-image. (See "styling underlines for the web" for a list of possible methods to create underlines). We can't use background-image to create gradient underlines since we used it to create the gradient text.

But the underline looks ugly!

The text-decoration underline looks ugly at large font sizes. But when they're ok when they're at normal font sizes.

Blue color link with blue underline. When hovered, text has a orange to yellow gradient; underline becomes solid orange.

I suggest you don't add text-decoration underlines to large text. Consider creating underlines with a different method instead.

Gradient + Focus

Gradient links look amazing with focus outlines. Just saying.


Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .