Can't add transition to scrollbar color on hover

Question

I have made a custom scrollbar for my site which uses linear gradient color which changes on hover. However I am unable to change the color smoothly with a transition can anyone help me with this. this is my CSS for the scrollbar

::-webkit-scrollbar{
    width: 12px;
}
::-webkit-scrollbar-track{
    background: #1b1b1b;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(#757575,#2e2e2e);
    border-radius: 6px;
    transition: background 0.5
}
::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(#2e2e2e,#1b1b1b);
}

The transition: background 0.5s;dosent seem to work and I cannot use color instead of background to add color to the scrollbar thumb. Please tell me how I can add transition to the color of the scrollbar.