CSS Transition with Linear Gradient

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 fading-transition background: linear gradient, does not work

Transitioning gradients is not supported, as explained here.

A workaround could be, to transition the background-position and scaling the background. This way we can achieve something very similar.

div {
  background-image: linear-gradient(0deg, #e1ebff 0%, #e1ebff 25%, rgba(227, 227, 227, 1) 75%, rgba(247, 247, 247, 1) 100%);
  padding: 7px 10px;
  background-size: 100% 400%;
  background-position: 100% 0%;
  transition: .2s;
}

div:hover {
  background-position: 100% 100%;
}

<div>Lorem ipsum</div>

Transition on linear-gradient

You could try doing a transition from white to black (if, by your suggested code snippet, that is what you'd like).

<a class="btn btn-1">Hover me</a>

Accompanied by CSS:

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #fff), var(--c2, #333) 51%, var(--c1, #000)) var(--x, 0)/ 200%;
  color: white;
 }


.btn:hover { --x: 100%; }

.btn-1 {
  --c1: #fff;
  --c2: #000;
}

See my fiddle for more

https://jsfiddle.net/80f7t1ej/

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

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

Animating Linear Gradient using CSS

Please try this code:

#gradient{    height:300px;    width:300px;    border:1px solid black;    font-size:30px;    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);    background-size: 200% 200%;
    -webkit-animation: Animation 5s ease infinite;    -moz-animation: Animation 5s ease infinite;    animation: Animation 5s ease infinite;}
@-webkit-keyframes Animation {    0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}@-moz-keyframes Animation {    0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}@keyframes Animation {     0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}

<html><div id="gradient">  Hello</div></html>