Contact

contact

Title

CSS transition background gradient

description

Really creative and nice solution for the undoable, by Chris Coyier from CSS Tricks

Published 2022-08-04

Modified 2022-08-19

content

				
					.gradientswap {
  z-index: 1; /* matters! */
    background-color: transparent;
    background-image: linear-gradient(180deg, red 50%, blue 100%);
}
.gradientswap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background-color: transparent;
    background-image: linear-gradient(180deg, green 50%, yellow 100%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}

/*this next part changes if using JS toggleClass*/
.gradientswap:hover::before {
  opacity: 1;
}

With JS .toggleClass on hovering an element

Hover 
				
					$('.gradienttrigger').hover(function () {
    $('.gradientswap').toggleClass('swapnow');
 });


				
			
				
					.gradientswap.swapnow:hover::before {
  opacity: 1;
}

Sources & References