How to make transition to background property?

Question

I have some text with background and background-clip property for achieving gradient colored text (look at the attached image). I need to add transitions for switching color by hover on my text, how to make it properly?

that what i tried to do:

.UIText {
  width: fit-content;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text !important;
  cursor: pointer;
  background: white;
  -webkit-transition: background 1000ms linear;
  -moz-transition: background 1000ms linear;
  -o-transition: background 1000ms linear;
  -ms-transition: background 1000ms linear;
  transition: background 1000ms linear;
}
.solid{
  background: $gradient;
  &:hover{
    background: $reverse-gradient;
  }
}
.primary{
  background: white;
  &:hover{
    background: $gradient;
  }
}

typescript:

import React, {ReactNode} from 'react';
import classes from "../scss/UIText.module.scss";

interface IUIText {
    children: ReactNode;
    type: string
}

const UIText = (props: IUIText) => {
    const cls = [classes['UIText'], classes[props.type]]
    return (
        <div className={cls.join(' ')}>
            {props.children}
        </div>
    );
};

export default UIText;

usage:

<UIText type={'solid'}>Главная</UIText>