Animate gradient background

Using gradient with opacity and animating background-color

by rulokc

HTML

<div class="container"></div>

CSS

html, body {
    height: 100%;
}
.container {
    width: 300px;
    height: 300px;
    background-color: #1e5799;
    background-image: -webkit-radial-gradient(center, ellipse cover, transparent 0%,#7db9e8 100%);
    -webkit-transition: background 1s ease;
}
.container:hover {
    background-color: #fff;
}