Use Css3 Transitions With Gradient Backgrounds

Use CSS3 transitions with gradient backgrounds

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.

(There have been some browser releases that supported transitions on gradients (e.g IE10. I tested gradient transitions in 2016 in IE and they seemed to work at the time, but my test code no longer works.)

Update: October 2018
Gradient transitions with un-prefixed new syntax [e.g. radial-gradient(...)] now confirmed to work (again?) on Microsoft Edge 17.17134. I don't know when this was added. Still not working on latest Firefox & Chrome / Windows 10.

Update: December 2021
This is now possible in recent Chromium based browsers using the @property workaround (but is not working in Firefox). Please see @mahozad's answer below.

Linear Gradient Transition

You cannot apply a fade transition with a linear-gradient like this. An alternative is to use a pseudo-element on where you apply an opacity transition:

.project-1 {  background-image: url("https://cdn.pixabay.com/photo/2018/03/11/20/42/mammals-3218028_960_720.jpg");  width: 350px;  height: 250px;  background-position: center;  background-size: cover;  transition: transform 0.5s, opacity 0.5s;}
.project-1:before {  content: "";  position: absolute;  top: 0;  right: 0;  left: 0;  bottom: 0;  background: rgba(0, 0, 0, 0.39);  transition: 0.5s;  opacity: 0;}
.project-1:hover {  transform: scale(1.05);}
.project-1:hover::before {  opacity: 1;}

<div class="project-1"></div>

css transition on background image gradient

It's not possible to have transitions on background gradients. But you can have a look at this link to make it work with "hacks": http://nimbupani.com/some-css-transition-hacks.html

You can also make it appear like it's changing by using the background-position shift: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Here is a similar question with more links and information btw: Use CSS3 transitions with gradient backgrounds

css transition is not working on gradients?

I believe the only animatable property on a background gradient is background-position.

You may be able to achieve what you're looking for by doing something like the following:

.card {
  position: relative;
  text-align: center;
  color: white;
  padding: 100px;
  background: url("https://oniichann.tk/waifus/images/bg.jpg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
}

.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 200% 200%;
  transition: background-position 0.5s linear;
}

.card:hover:before {
  background-position: 100% 50%;
}

<div class="card"></div>

CSS transition with background gradient

This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:

Here is a generator

Here is an explanation

edit

Sorry I didn't realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.

Here is a good article on how to get it to work with a little bit of a hack

http://nimbupani.com/some-css-transition-hacks.html

How to change DIV `background linear-gradient` on hover with fade effect using CSS only?

For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.

#div-text {    display: flex;    flex-direction: row;    width: 80%;    height: 80%;    border-radius: 20px;    background: #2d2e31;    position: relative;    z-index: 1;    overflow: hidden;  }    #div-text::after {    content: "";    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    transition: opacity 1s ease;    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);    opacity: 0;  }
  .cl-button {    font-family: 'Merienda One', monospace;    order: 2;    align-self: center;    height: 80%;    width: 60%;    border: 0;    background-color: transparent;    color: aliceblue;    font-size: 16px;    margin-left: 10px;    text-align: left;    position: relative;    z-index: 3;  }

    #div-text:hover::after{      opacity: 1;  }

<div id="div-text">  <button id="button-text" class="cl-button">Text Here</button></div>

Use Css3 Transitions With Gradient Backgrounds