Как медленно изменить цвет градиента при наведении курсора?

Я хочу изменить цвет linear-gradient() при наведении курсора плавно, как сплошной цвет, но с градиентным цветом. Я зашел на w3schools и в сеть Mozilla, чтобы узнать, как это сделать. ничего по нему не нашел. Я бы попробовал сделать это так же, как для сплошных цветов, transition: background 1s linear, но, похоже, это не сработало. Любые идеи? Я разместил код HTML и CSS ниже:

<header>
<nav class = "navbar navbar-dark bg-dark" aria-label = "navbar">
  <div class = "container-fluid justify-content-between">
    <button class = "navbar-toggler" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#leftMainNav"
      aria-controls = "leftMainNav" aria-label = "Toggle left navigation">
      <span class = "navbar-toggler-icon"></span>
    </button>
    <a class = "navbar-brand" href = "index.php">
      <img src = "assets/images/logo-l.png" class = "img-fluid" alt = "CBS Logo">
      <span class = "navbar-brand-text">CherryBerry Studios</span>
    </a>
    <div class = "d-flex" style = "width:240px;">
      <ul class = "navbar-nav">
        <li class = "nav-item dropdown">
        <a class = "nav-link dropdown-toggle" href = "#" role = "button" aria-expanded = "false">Company</a>

        <ul class = "dropdown-menu position-absolute" style = "top:55px; width:110px;">
            <li><a class = "dropdown-item text-center" href = "#">About Us</a></li>
            <li>
              <hr class = "dropdown-divider">
            </li>
            <li><a class = "dropdown-item text-center" href = "#">Partners</a></li>
            <li>
              <hr class = "dropdown-divider ">
            </li>
            <li><a class = "dropdown-item text-center" href = "#">Affiliates</a></li>
            <li>
              <hr class = "dropdown-divider">
            </li>
            <li><a class = "dropdown-item text-center" href = "#">Legal Info</a></li>
            <li>
              <hr class = "dropdown-divider">
            </li>
            <li><a class = "dropdown-item text-center" href = "#">Support</a></li>
            <li>
              <hr class = "dropdown-divider">
            </li>
            <li><a class = "dropdown-item text-center" href = "#">Our Team</a></li>
          </ul>
        </li>
      </ul>
        </li>
      </ul>
      <button type = "button" class = "btn btn-menu mt-1 ms-2 me-2" data-bs-toggle = "modal"
        data-bs-target = "#signupModal">Sign Up</button>
      <button class = "navbar-toggler" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#rightMainNav"
        aria-controls = "rightMainNav" aria-label = "Toggle right navigation">
        <span class = "navbar-toggler-icon"></span>
      </button>
    </div>
    <div class = "offcanvas offcanvas-end bg-dark" tabindex = "-1" id = "rightMainNav" aria-labelledby = "rightMainNav">
      <div class = "offcanvas-header">
        <h5 class = "offcanvas-title p-0 m-0 justify-content-middle" id = "rightMainNavLabel">Offcanvas</h5>
        <button type = "button" class = "btn-close btn-close-white justify-content-end" data-bs-dismiss = "offcanvas"
          aria-label = "Close"></button>
      </div>
      <div class = "offcanvas-body justify-content-end">
        <ul class = "navbar-nav">
          <li class = "nav-item">
            <a class = "nav-link active" aria-current = "page" href = "#">Home</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "#">Link</a>
          </li>
        </ul>
      </div>
    </div>
    <div class = "offcanvas offcanvas-start bg-dark" tabindex = "-1" id = "leftMainNav" aria-labelledby = "leftMainNav">
      <div class = "offcanvas-header">
        <button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "offcanvas"
          aria-label = "Close"></button>
        <h5 class = "offcanvas-title" id = "leftMainNavLabel">Offcanvas</h5>
      </div>
      <div class = "offcanvas-body">
        <ul class = "navbar-nav d-flex">
          <li class = "nav-item">
            <a class = "nav-link active" aria-current = "page" href = "#">Home</a>
          </li>
          <li class = "nav-item">
            <a class = "nav-link" href = "#">Link</a>
          </li>

        </ul>
      </div>
    </div>
  </div>
</nav>

    .navbar-brand-text {
  background: -webkit-linear-gradient(green, magenta, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 1s;
}

.navbar-brand-text:hover {
  background: -webkit-linear-gradient(blue, red,);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}