Himas Rafeek
Posted on: 1 year ago

Transition Effect for Gradients on Hover

A simple transition from a linear gradient to a radial gradient can be made very dramatic by including a color change transition. One of 10 effects presented.

                                          #eight    {
    background: linear-gradient(to bottom,                                   rgba(2,62,31,.5),                                  rgba(24,199,140,1),                                  rgba(2,62,31,.5));
    color: maroon;
    transition: all, 2s;
#eight:hover  {
    background: radial-gradient(5em circle,                                         rgba(115,6,162,1),                                         rgba(113,112,127,.5),                                         rgba(115,6,162,1));
    color: white;
    transition: color, 2s;