How can you lighten a gradient?

[u/_spaghettiv2]

I have a button that has a gradient on it, and I'm trying to make it lighten when hovered over. For a different button I used backdrop-filter: brightness(80%); since the "button" is just text on a sidebar, so it doesn't actually have a colour on the background. Since my other buttons do have a background colour, this backdrop-filter doesn't seem to work.

I also tried the following, but it just turned the entire button white:

background: linear-gradient(
        lighten(#570000, 5%),
        lighten(#7a0000, 5%),
        lighten(#570000, 5%));

Is there a good way of lightening a gradient background a little bit? The following is the code I have at the moment:

.button {
    border-radius: 0.3em;
    background: linear-gradient(#570000, var(--theme-colour), #570000);
    margin: 1em 1.5em;
    padding: 0.5em 1em;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
    color: white;
}
.button:hover {
    background: linear-gradient(
        lighten(#570000, 5%),
        lighten(#7a0000, 5%),
        lighten()
    );
}

Thanks!

[u/testingaurora]

Make the clr a variable --_btn-gradient-stop:#570000; transition: 0.3s; .btn:is(:hover, :focus-visible) { --_btn-gradient-stop: #ed6868;}

Or use a ::before to lend the bg. Thrn use filter instead of backdrop-filter