Multiple Backgrounds

by cvalleskey

HTML

<div class="fancyBox"></div>

CSS

.fancyBox {
    width: 300px;
    height: 300px;
    border-radius:50%;
    background:red;
    background-image: 
    linear-gradient(96deg, rgba(155,255,136,0.51) 7%, rgba(255,3,235,0.50) 97%), 
    linear-gradient(185deg, rgba(211,255,0,0.00) 0%, #00C9FF 100%);
    background-size:100%;
    transition:all 1s ease-in;
}

.fancyBox:hover {
      background-size:200%;
}