CSS3 gradient transition with background-position
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> #DemoGradient { background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size: 1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor: pointer; width: 150px; height: 100px; } #DemoGradient:hover { background-position: 100px; } </style> <div id="DemoGradient"></div> </body> </html>