Making text color darker transition not working in CSS

February 4, 2023

I tried to make some text darker in CSS when you hover over it, sadly it doesn’t work correctly.
I want a smooth transition, however it just goes from one to the other.

Browser: Chrome
OS: Win11 64Bit

Here’s my code:

body {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-image: linear-gradient(to bottom right, rgb(3, 0, 49), rgb(47, 0, 134));
    overflow: hidden;
}

#logo {
    float: left;
    height: auto;
    width: 20%;
    float: left;
    margin-top: -15px;
    margin-left: -10px;
    border-radius: 75px;
}

.maintext {
    user-select: none;
    position: absolute;
    top: 40%;
    left: 40%;
    font-size: 100px;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.maintext:hover {
    background: linear-gradient(to right, #b11b54, #9b4104, #7e177e, #867d28);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    transition: 0.3s;
}

>Solution :

Currently, transitioning between gradients in CSS is not easy. It requires using CSSPropertyRule, which at the moment, has limited browser support.

However, if your goal is to simply make the gradient darker when you hover over it, you can accomplish this by applying the brightness CSS filter.

.maintext {
    font-size: 50px;
    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    
    filter: brightness(1);
    transition: filter 0.3s;
}

.maintext:hover {
    filter: brightness(0.5);
}