CSS3 gradient transition with background-position

7:42 am

Although you can’t directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:

The code for this is dead simple:

    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;
    width: 150px;
    height: 100px;
<div id="DemoGradient"></div>

If you have any questions, feel free to comment and ask!
I always appreciate a challenge.

Posted in: Design


  1. Doesn’t work buddy…

  2. It’d be nice to finally get a simple ability to :hover a new background gradient, but oh well. This is definitely well worth a hover effect if you don’t want to go to solid bg color.

Leave a Reply

Your email address will not be published. Required fields are marked *