I am trying to modify the color of a linear-gradient() smoothly upon hovering, similar to how a solid color changes. I searched on w3schools and the Mozilla network for a solution but couldn't find anything. I attempted to apply the transition property like you would for solid colors (transition: background 1s linear), but it didn't work. Any suggestions? I have included the HTML and CSS code below:
<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>
...
...
</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;
}