CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette.
Though, there are some simple ways you can simulate smooth transitions on gradients and below you’ll see how to do that.
I wrote about this matter before in one of my articles and I was thinking this new article will hopefully be more useful to you as it contains one more extra technique that can help you faking transitions on background gradients.
So, what is this about and why would you care about transitions on gradients? The answer is very simple: just think about the situation when you’re designing some CSS3 buttons. To make them look awesome, it’s almost mandatory to use shadows, rounded corners and gradients.
Read the workarounds described below and you’ll be able to greatly improve your gradient buttons, especially their :hover state.
Initial styles
For this demo, we’re using three colored boxes to whom are applied the following workarounds.
I extracted only the important styles needed and as you can see, the background-color has the most important role, as it’s the one who’s actually being transitioned here.
.boxes li{
transition: background-color .2s ease-out;
}
.boxes .red{
background-color: #da232a;
}
.boxes .red:hover{
background-color: #e75f64;
}
.boxes .green{
background-color: #72b01a;
}
.boxes .green:hover{
background-color: #9ed354;
}
.boxes .blue{
background-color: #269ce9;
}
.boxes .blue:hover{
background-color: #70b9e8;
}
1. Background-image
Having already a transitioned background-color, you just need to set a semi transparent background using background-image and the result will be a smooth gradient transition for the element to whom these styles are applied to.
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
2. Box-shadow
Perhaps this is a bit dirtier, but it’s still a fully working technique. Instead of a semi transparent background as above, this assume using an inset box-shadow:
box-shadow: 0 60px 50px -30px rgba(255, 255, 255, .5) inset;
Conclusion
As you can see, the workarounds above are quite simple and easy to implement. Also, the big advantage is that they don’t require any additional markup element to work.
Thanks for reading and feel free to share your thoughts!
background-sizecan also be transitioned (this can simulate a changing angle in gradient). Also, transitions onbackground-color,background-positionandbackground-sizecan be combined to get some quirky effects – demo.Indeed, transitioning
background-positionandbackground-sizecould be another working solution. But, comparing it with the workarounds above, I find this a little bit trickier and perhaps harder to manage when it comes to selecting a certain color from a color palette. Or maybe it’s just me.Btw, nice demo! ;)
Awosome Guys!
THe final output color is not shart why not you are using like that
.blue-color
{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 ); /* IE6-9 */
}
.blue-color:hover
{
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a90329′, endColorstr=’#6d0019′,GradientType=0 ); /* IE6-9 */
}
semi transparent background and inset shadow are very cool i m going to use in my project and i m first time read about the hover faking effect thx for sharing.
even though its a year old its still a useful guide…. didnt know about it ,, thanx for sharing :-)