CSS fading-transition background: linear gradient, does not work

Question

A simple html element with CSS background linear-gradient.

Goal: Fade background on hover. Does not work (with transition background), see example below - Why?

ui-accordion-header {
  border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

.mx-accordion h1 {
    background: linear-gradient(0deg, rgba(227,227,227,1) 20%, rgba(247,247,247,1) 100%);
    border: 1px solid #e3e3e3;
    border-width: 0 0 1px;
    color: #000;
    padding: 7px 10px;
    margin: 0px;
    
    transition: background .2s ease-in-out;
}

.mx-accordion h1:not(.ui-state-active):hover {
    background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
    cursor: pointer;
    color: #027BFF;
}

<div id="accordion" class="mx-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">


<h1 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <a href="#">My Text</a>
    </h1>
  
  </div>

`ui-accordion-header` is not a valid CSS selector for your HTML. I guess this should be a class? — cloned, Mar 15 '22 at 07:39
Does this answer your question? [CSS3:transition does't work when the background color is gradient](https://stackoverflow.com/questions/11788544/css3transition-doest-work-when-the-background-color-is-gradient) — cloned, Mar 15 '22 at 07:41
Does this answer your question? [Use CSS3 transitions with gradient backgrounds](https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — Mori, Mar 15 '22 at 07:49
I'm not quite clear what you want to do - do you want to fade between the two linear-gradients - i.e. on hover one fades out as the other one fades in? — A Haworth, Mar 15 '22 at 08:21

DvdRom · Accepted Answer · 2022-03-16T08:43:13.627

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>

score 1 · Answer 2 · answered Mar 15 '22 at 08:47

While gradient images do not transition in the same way as say background-color, you can transition opacity and that would seem to be what you want as you mention fade.

Of course, you dont want to alter the opacity of the whole element, so this snippet adds the two backgrounds in pseudo before and after elements and transitions the opacities of those.

.ui-accordion-header {
  border: 0 none;
  font-size: 100%;
  line-height: 1.3;
  list-style: none outside none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  text-decoration: none;
}

.mx-accordion h1 {
  border: 1px solid #e3e3e3;
  border-width: 0 0 1px;
  color: #000;
  padding: 7px 10px;
  margin: 0px;
  position: relative;
}

.mx-accordion h1:not(.ui-state-active):hover {
  cursor: pointer;
  color: #027BFF;
}

.mx-accordion h1::before,
.mx-accordion h1::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  z-index: -1;
  transition: opacity .2s ease-in-out;
}

.mx-accordion h1::before {
  background: linear-gradient(0deg, rgba(227, 227, 227, 1) 20%, rgba(247, 247, 247, 1) 100%);
  opacity: 1;
}

.mx-accordion h1:hover::before {
  opacity: 0;
}

.mx-accordion h1::after,
.mx-accordion h1:not(.ui-state-active)::after {
  background: linear-gradient(0deg, #e1ebff 20%, #e1ebff 100%);
  opacity: 0;
}

.mx-accordion h1:not(.ui-state-active):hover::after {
  opacity: 1;
}

<div id="accordion" class="mx-accordion ui-accordion ui-widget ui-helper-reset" role="tablist">


  <h1 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-4" aria-controls="my-filters" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <a href="#">My Text</a>
  </h1>

</div>

Nice workaround, appreciated – DavidDunham Mar 16 '22 at 06:09 — DavidDunham, Mar 16 '22 at 06:09

CSS fading-transition background: linear gradient, does not work

2 Answers2