Thoughts

CSS3 Gradients and Hover Transitions

View Demo | Download Source

CSS3 offers the ability to add gradients without having to cut out an image. However, since using gradients is technically a background image, you cannot simply change the colors of your gradient on hover and expect a smooth transition. There are a few options to get around this problem. We’ll use gradients on buttons in these examples.

Opacity Method

First off, you could use the opacity method, which is probably the easiest of all the methods. You simply specify your gradient and add a transition. The Ultimate CSS Gradient Generator is a great tool if you’ve never made a CSS3 gradient before. Then on hover you add an opacity to the button. Pretty simple. The only problem with this method is the fact that you really do not have any control over the color of the hover. You could only specify the percentage of the opacity. So if you wanted to make the gradient darker, it would only work if it was on a dark background.

Background Size Method

The next method uses background-size and background-position to help with the transition. After you set up your gradient, you specify the background-size by increasing the height of your button and setting 1px as the width. Then you do a background-repeat: repeat-x; So let’s say the height of your button was 50px, you could do background-size: 1px 80px; Then on hover, you would change the background position to a negative height. The color of the hover will depend on the negative height. You could play around with the negative height to see how light or how dark the hover will be.  Since transitions work on background-positions, you will see a smooth transition. You do run into a problem with this method. Since you are increasing the height of the gradient, it is going to look different. In order to achieve a similar color to the intended gradient, you will have to choose a darker or lighter bottom color in your gradient. You may have to do some trial and error in order the match the original color.

Box-Shadow Method

The last method that I’m going to discuss is using box-shadow insets to achieve the transition. In this method you are not actually using CSS gradients. You are using a box-shadow inset to make the button look like it has a gradient. You could choose whether you want the inset to come from the top or from the bottom. The color you choose for the background will depend on this decision. If I wanted the inset to come from the top, I am going to make the background color of the button, the bottom color of the gradient, and vice versa.  Then I am going to add in my box-shadow. I set up my box-shadows with 0 for the horizontal shadow, half the height for the vertical shadow, the full height for the blur, a negative “half the height” for the spread, and a 50% white for the color. So if it is a button with the height of 50px, my box-shadow looks something like this box-shadow: 0 25px 50px -25px rgba(255, 255, 255, .5) inset; Then on hover, you simply change the numbers of the box-shadow to achieve your desired effect. Since transitions work on box-shadows, you now have a smooth transition on a fake gradient. You run into similar problem in this method. You may have to play around with the numbers on your box-shadows in order to match the gradient perfectly.

I hope these methods help out when you run into the problem of adding a transition to a gradient. Gradients and box-shadows aren’t supported in all versions of Internet Explorer. However, CSS3 Pie “makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.”

  • Share by Email