Himas Rafeek
Posted on: 1 year agoTransition 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;
}