CSS Animate Gradient Color on Hover

No doubt, color gradients play an important role in an attractive UI design. Similarly, CSS animations also play a vital role in regards to build mind-blowing designs. But, how would it be if we animate the color gradient? Of course, it’ll be mind-blowing and look pretty. So, in this tutorial, you will learn how to animate the HTML color gradient on hover using pure CSS.

Before getting started with coding, let’s discuss where you can apply this animated gradient. Basically, a color gradient used as a background (or foreground) of an HTML element. It can be a background of a button, form, section, or any div element. So, you can implement this animated gradient on almost all elements that support CSS background property.

In this tutorial, we’ll animate the background gradient of a CSS virtual button. However, the coding concept is the same for other elements that you want to animate their gradient color. You can apply the same rules to animate the gradient on hover. You can check the final output of this project on the demo page. OK! let’s begin with HTML.

Basic Markup

As you have seen on the demo page, there are five different buttons containing various hover styles. You just need to create a link button (or any element that will contain gradient) with the following mention classes.

  <a class="btn btn-1">Hover me</a>
  <a class="btn btn-2">Hover me</a>
  <a class="btn btn-3">Hover me</a> 
  <a class="btn btn-4">Hover me</a> 
  <a class="btn btn-5">Hover me</a>

 

CSS to Animate Gradient on Hover

In order to create an animated gradient, we need to define CSS angles linear-gradient syntax along with the CSS variables. After that, we’ll define the colors in variables that will be displayed on hover. The other CSS properties like margin, padding, and text-align, etc are optional for this selector. You can define custom values for them.

.btn {
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;
  color: white;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }

In the above code snippet, the background property contains a linear-gradient color with a 90-degree direction. In order to animate the gradient, we’ll change the var(–x) value with hover pseudo-selector.

Now, define the color variables for “.btn-1” to “.btn-5 ” selectors just like below. Actually, you just need to define two (–c1 and –c2) CSS variables that are used in the above linear-gradient. You can ignore the other selectors if you are creating an animated gradient for a single item.

.btn-1 {
  --c1: #f6d365;
  --c2: #fda085;
}

.btn-2 {
  --c1: #fbc2eb;
  --c2: #a6c1ee;
}

.btn-3 {
  --c1: #84fab0;
  --c2: #8fd3f4;
}

.btn-4 {
  --c1: #a1c4fd;
  --c2: #c2e9fb;
}

.btn-5 {
  --c1: #ffecd2;
  --c2: #fcb69f;
}

Instead of using color variables, you can also place your color code directly in the linear-gradient. However, the variable –x is necessary to animate the gradient on mouseover. Finally, define the value of variable x as 100% with .btn:hover selector and done.

.btn:hover { --x: 100%; }

That’s all! I hope you find this tutorial helpful to animate the gradient on hover. If you have any questions or suggestions related to the animated gradient let me know by comment below.

You Might Be Interested In: