 <p>Easiest way I could see to do this was absolutely positioned 'before' pseudo-element with the gradient applied to it, and the opacity set to 0 when active. I've also added a toggle on the ul itself for the sake of ease.</p> <p>Easiest to give you the jsfiddle:</p> <p><a href="https://jsfiddle.net/efreeman79/8oemm50L/1/" rel="nofollow">https://jsfiddle.net/efreeman79/8oemm50L/1/</a></p> <p>I've added this to the styles:</p> <pre><code>li:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; opacity: 1; transition: all 0.35s ease; /* GRADIENT CSS CODE HERE */ } .active li:before { opacity: 0; } li.even:before { transform: rotate(180deg); } </code></pre> <p>and this for the sake of ease:</p> <pre><code>$('ul').toggleClass('active'); </code></pre> <p>It needs some polish but it does the job. Basically when the ul is active, opacity on the gradient is set to 0, when the active class is removed, the gradient layer's opacity is animated back to 1.</p>