CodePen Embed - Transitioning Gradients

<div class="gradient"><a href="#">test to verify content remains visible & on top</a></div>
Hover over the element above to fade the background gradient.

<!-- Full write-up at http://keithjgrant.com/posts/2017/07/transitioning-gradients/ -->

.gradient {
  position: relative;
  min-height: 200px;
  background-image: linear-gradient(
    to right,
    hsl(211, 100%, 50%),
    hsl(179, 100%, 30%)
  );
  z-index: 1;
}

.gradient::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to bottom,
    hsl(344, 100%, 50%),
    hsl(31, 100%, 40%)
  );
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}
.gradient:hover::before {
  opacity: 1;
}

This Pen is owned by Keith J. Grant on CodePen.

See more by @keithjgrant on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.