CSS background (gradient) transition not working

Question

The CSS transition on my a tag isn't fading in and out, its just like there's no transition at all! I tried using transition: background 300ms ease-in-out; too but still no luck

CSS:

.FeatureRow a{
    padding: 10px;
    display: block;
    width: 260px;
    height: auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0px 4px 8px #f5f5f5;
    -moz-box-shadow: 0px 4px 8px #f5f5f5;
    box-shadow: 0px 4px 8px #f5f5f5;
    background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
    background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
    background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
    background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
    background-repeat: repeat-x;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
    background-image: -moz-linear-gradient(top,#C00,#C0F);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#C00),to(#C0F));
    background-image: -webkit-linear-gradient(top,#C00,#C0F);
    background-image: -o-linear-gradient(top,#C00,#C0F);
    background-image: linear-gradient(to bottom,#C00,#C0F);
}

score 14 · Answer 1 · edited Jun 20 '20 at 09:12

14

As Adrift says, this is not supported; you have to simulate it.

This is the CSS

.FeatureRow {
    padding: 10px;
    display: block;
    position: relative;
    width: 260px;
    height: 70px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-image: linear-gradient(0deg,white,gray);
}

.FeatureRow:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg,red,magenta);
    opacity: 0;
    transition: all 3s ease-in-out;
}

.FeatureRow:hover:after {
    opacity: 1;
}

We are overlaying your div with a pseudo element. Each one has a gradient. The pseudo element has opacity set to 0; when you hover it you change the opacity to 1; and this property can be transitioned.

demo

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 31 '13 at 17:32

vals

61,425
11
89
138

This does not work for buttons unfortunately – Seth B Feb 15 '21 at 17:34
1

appreciate it man this worked for me! – Okym Dec 22 '21 at 01:03
2

@SethB it does work, if the problem you are having is the text being hidden behind a background, make sure you put **z-index: 1** on your btn, and **z-index: -1** on your :after – Dremiq Mar 19 '22 at 16:01

score 8 · Answer 2 · edited Jan 08 '19 at 05:36

As noted in other answers, it is not possible to animate a gradient. It is however possible to animate background-color. Knowing this, you can layer a transparent gradient on top of a background color, which will allow you to animate one of the colors in your gradient.

To do this, choose the color you want to animate, set it as the background-color, and put rgba(0,0,0,0) (transparent) in its place.

Then all you have to do is on :hover or with javascript change background-color to your desired value

This will only work to transition one color of your gradient. But I think it's still a decent option to transition a gradient

.squareTile {
 background: radial-gradient(#203244eb, rgba(0,0,0,0), #203244eb);
 background-color: #3596ff;
 border-radius: 10px;
  width: 100px;
 height: 100px;
 border: 1px solid black;
 cursor: pointer;
 transition: 1s;
}

.squareTile:hover {
 background-color: #77c577;
}

<div class="squareTile">
</div>

This is actually quite a clever answer. It won't work in very situation of course, but way to think outside the box! — Tim Mackey, Jan 08 '19 at 00:44

score 4 · Answer 3 · edited May 23 '17 at 12:32

4

Using gradients for animations (or transitions) is unfortunately not supported by any browser at the moment. Take a look at this list in the Transitions module for a list of all current animatible properties

edited May 23 '17 at 12:32

Community

1
1

answered Jul 30 '13 at 16:30

Adrift

58,167
12
92
90

Is it possible to use a background image and then use a transition to "overwrite" the image with just background-color? – Blease Jul 30 '13 at 16:46
You unfortunately can't do that either because background-images aren't animatible. Take a look at the list in my answer. – Adrift Jul 30 '13 at 16:48
Great.. this proves that all these new CSS3 tricks are becoming as complex as useless. – andreszs Aug 19 '14 at 23:22

score 0 · Answer 4 · answered May 24 '20 at 03:02

animating a background gradient is possible, as mentioned, and there's a quite good tool currently up to let you play with the feature:

https://www.gradient-animator.com/

example output:

.css-selector {
    background: linear-gradient(270deg, #8ccebd, #146e57);
    background-size: 400% 400%;

    animation: AnimationName 5s ease infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

CSS background (gradient) transition not working

4 Answers4

demo