Why transition doesn't work when background is linear gradient in CSS

Question

I want the background to be colored with linear gradient when hover in css. Since the transition is very fast, I tried to handle it with transition, but unfortunately it does not work when there is a transition linear gradient. Could someone help me on this?

<div class="scroolspy d-none d-lg-block">
 <ul>
   <li>
     <a href="#">asd</a>
   </li>
 </ul>
</div>
<style>
.scroolspy {
position: fixed;
height: 100%;
width: 10%;
top: 0%;
left: 0%;
}

.scroolspy:hover {
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
transition: 2s linear;
-webkit-transition: 2s linear;
-moz-transition: 2s linear;
-ms-transition: 2s linear;
-o-transition: color 2s ease-out;
}
</style>

score 2 · Answer 1 · answered Jul 26 '21 at 09:03

/*CSS Code*/

.scroolspy {
    position: fixed;
    height: 100%;
    width: 10%;
    top: 0%;
    left: 0%;
    background: ;
}

.scroolspy:before {
  position: absolute;
  content: "";
  left: -100%;
  top: 0;
  height: 100%;
  width: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    transition:all 0.5s ease;
    -webkit-transition: 0.5s ease
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: color 0.5s ease;
}
.scroolspy:hover:before{
  left: 0;
}

<!-- HTML CODE -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    </head>
<body>
    <div class="scroolspy d-none d-lg-block">
        <ul>
            <li>
                <a href="#">asd</a>
            </li>
        </ul>
    </div>
</body>
</html>

Actually Gradients does not support the transition property but you can do some transition as discussed above

You are welcome. please upvote this, if it is helpful for you so that it can also be useful to others. — Harshil Khamar, Jul 26 '21 at 09:54

score 0 · Answer 2 · answered Jul 26 '21 at 08:39

Unfortunately transitions don't work on gradients. You could try a workaround - for example:

Put the gradient on a container behind the div, and set the div itself to background:#fff;
Then when you hover over the div, you can change it to background:transparent and it will reveal the gradient behind it. Now a transition will work.

Why transition doesn't work when background is linear gradient in CSS

2 Answers2