Forem

Emmy | Pixi
Emmy | Pixi

Posted on

61 18

How To: Create A Rainbow Link Hover Effect

So, typically I try to write pretty long, in-depth articles and tutorials. This week I do not have the energy, so we're doing a quick tutorial on how I created a rainbow hover effect for the links in the forth-coming redesign of my website and blog. This is also my first tutorial on anything CSS related! 🎉 So, let's get into it...

First, let's talk a tags:

As you probably already know, a tags are what we use to create both internal and external links on a webpage. We can target and add effects to links when we hover our cursor over them by using the :hover selector.

For example, let's say on my site, I have all of my a tags set to be blue by default:

a {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

And I want them to be red when they're hovered over. To accomplish that, we can simply do the following:

a:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

This will produce the effect demonstrated below:

Great! We can handle a basic a tag hover. Now how do we get it to be a rainbow? 🤔

Creating a linear-gradient

In order to create the rainbow effect we're looking for, what we need to do is apply a linear-gradient background to our text, and then use something called a background-clip to only apply that gradient to the text of our link.

First, let's create that gradient:

a {
  color: black;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
}
Enter fullscreen mode Exit fullscreen mode

The linear-gradient background option takes a few arguments:

  • First, the angle you want the direction of your gradient to be. Here, I've chosen 90deg so the gradient will go in order from left to right. (if you do not include this argument the gradient will be applied from top to bottom)

  • Then, you can list any number of colors you want to include in your gradient. I've chosen the full rainbow spectrum, but you could really choose any colors you like, and use any color format (CSS color names, hex color codes, HSL, RGB, etc).

Try this out and see what happens.

Oops! That's not what we were expecting...

If you tried this out, you'll notice that the gradient is, as you might expect, applied to the entire background of our text.

This is where the background-clip comes in...

a {
  color: black;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
  background-clip: text;
  -webkit-background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

Using background-clip tells your CSS exactly where you want to apply your background. Setting this option to text tells our CSS we want the background only applied to the text inside of the element we're targeting.

You can read more about background-clip on MDN, but keep in mind that background-clip: text is not widely supported yet. This effect will work best in Firefox, Edge, and Chrome, as long as you include the -webkit-background-clip option. This effect will not work in IE, which I'm sure comes as no surprise.

Now that we've added this to our CSS you might be thinking that it's not working. Your text will appear as whatever color you've specified in your CSS (here I've used black) and that's a good thing!

There's one more step...

Now, when we we :hover over our links, we want to make our link text transparent, which will allow our background gradient to show through. I'm also going to add a slight transition effect, because I like the look of the gradient slowly fading in...

a:hover {
  color: transparent;
  transition: 500ms ease;
}
Enter fullscreen mode Exit fullscreen mode

Here's the final effect:

And that's it! We have a nice rainbow gradient hover effect on our links! 🎉

I really enjoy adding little touches like this to my projects because it just adds a fun little flair and some personality, plus I especially enjoying finding way to incorporate rainbows into anything I can.

Let me know if you try this out, and happy hovering!

xx -Emily / TheCodePixi

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (16)

Collapse
 
vickilanger profile image
Vicki Langer •

This is THE BEST! We had extra time in class today, so I had my students add this to their projects. Very cool stuff!

Collapse
 
thecodepixi profile image
Emmy | Pixi •

That's so fun!! I'm so glad you got to use it with your students!

Collapse
 
vickilanger profile image
Vicki Langer •

We did the hover over the h1. I think they really enjoyed adding all the colors. Thanks! aalesiak.codewizardshq.com/m12_htm...

Thread Thread
 
thecodepixi profile image
Emmy | Pixi •

OMG I love it!

Collapse
 
stlnick profile image
Nick •

I had no idea about background-clip.

This is awesome, thank you! Definitely gonna play around with this.

Collapse
 
thecodepixi profile image
Emmy | Pixi •

Ah cool! I'm glad I could teach you something new 😊

Collapse
 
andhop profile image
Andy Hopwood •

Awesome tutorial on background clip. Still getting used to that myself. Thank you!

Collapse
 
limusina10 profile image
limusina10 •

Nice, but I think we can imporve it:
Take a look at the answer of this question on StackOverflow:
stackoverflow.com/questions/547021...
Hope helps!

Collapse
 
thecodepixi profile image
Emmy | Pixi •

That's cool but also accomplishes a totally different thing.

Collapse
 
limusina10 profile image
limusina10 •

Ok sure, but the option exist ;)

Collapse
 
cydstumpel profile image
Cyd •

Love the background clip property! If you put the transition on the a in stead of the hover state it will transition both ways✨

Collapse
 
thecodepixi profile image
Emmy | Pixi •

Oh heck, you're right! Thanks for catching that

Collapse
 
codeperfectplus profile image
Deepak Raj •

This is really helpful.

Collapse
 
scrabill profile image
Shannon Crabill •

This is the beeeeeest. Thank you for writing up this tutorial. I can always use more gradient hover effects in my life.

Collapse
 
thecodepixi profile image
Emmy | Pixi •

Gradient all the things! 🙌

Collapse
 
klvenky profile image
Venkatesh KL •

That was one of the shortest and useful posts I've gone through recently. Highly recommended

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay