1

Multi-line gradient links

21 days ago from , Owner

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; }

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; }

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; }

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; }

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; /*...*/ }

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.