Multi-line gradient hyperlinks

Use cascading style sheets to create a gradient underline link that will span multiple lines.

One of the novelty developments in web design in 2020 is the gradient hyperlink. This was demonstrated beautifully on CSS-Tricks earlier this year and it seems to have become quite popular. Following that, numerous authors have posted methodologies for achieving either gradient hyperlink text or a gradient hyperlink underline. The problem that I encountered, when attempting to redesign my own website is that many of the methodologies do not work across multiple lines. So if the hyperlink is too long to fit inside a sentence (or a div), then it breaks graphically.

Gradients are a wonderful new tool in cascading style sheets that can be used for all sorts of features. In fact, there are some really nice browser-based tools available to assist in gradient creation such as the one at CSSgradient.io. The problem arises when one tries to deploy this to the underline of a hyperlink.

Looking at typical CSS, we might format hyperlinks as follows:

.style a,
{
text-decoration: underline;
color: #001341;
}
.style a:hover,
{
text-decoration: underline;
color: #2a2160;
}

This may be implemented in HTML as follows:

<div class="style">A sailor went to <a href="https://seaseasea.com.au">sea, sea, sea</a>.<div>

Unfortunately, we can’t use CSS’s linear-gradient() or radial-gradient() properties on text-decoration because it simply won’t work. The alternative approach is to use the “background method”.

Let me post the CSS styling that I have used on my own website to illustrate how I was able to generate a gradient underline on my links using this approach:

.style a {
color: #1e0942;
text-decoration: none;
background-image: linear-gradient(90deg, rgba(0,19,65,1) 0%, rgba(107,85,230,1) 50%, rgba(0,19,65,1) 100%);
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: 0 95%;
}

.style a:hover {
color: #2a2160;
background-size: 100% 2px;
background-image: linear-gradient(90deg, rgba(30,9,66,1) 0%, rgba(217,9,27,1) 50%, rgba(30,9,66,1) 100%);
}

This is relatively simple and works across multiple lines.

Firstly, you’ll notice that text-decoration is set to none. The “background method” is being employed to actually fill the background of the a href with a gradient fill image. The size of the image is set by background-size where we want it to be 100% wide (ie as wide as the link) but only 2px tall. The distance between the underline is set by background-position. To initiate a change upon hovering, we adjust the style with a:hover so it will change colours.

This is neat, simple and it works across multiple lines. It is also supported in Chrome, Firefox, Edge and (remarkably) Internet Explorer 11.

Have Your Say

Δ