在下面的例子中，一个锚标记有一个子标记和一个孙子标记。孙子有远背景梯度。近背景中的子元素是透明的，但是有渐变要过渡。在悬停时，子物体的不透明度在1秒内从0过渡到1。

下面是CSS:

.bkgrndfar {
  position:absolute;
  top:0;
  left:0;
  z-index:-2;
  height:100%;
  width:100%;
  background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
  opacity:0;
  transition: opacity 1s;
}

a.menulnk {
  position:relative;
  text-decoration:none;
  color:#333;
  padding: 0 20px;
  text-align:center;
  line-height:27px;
  float:left;
}

a.menulnk:hover {
  color:#eee;
  text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
  opacity:1;
}

这是HTML:

<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
  <div class="bkgrndnear">
  </div>
</div>
</a>

以上仅在最新版本的Chrome中进行测试。这些是悬停前，悬停中途和完全过渡的悬停图像:

一个更简洁的解决方案是设置背景色并使用蒙版图像。

#container div a {
  background-color: blue;
  transition: background 0.2s linear;
  width: 200px;
  height: 150px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .7), rgba(0, 0, 0, .4));
}

#container div a:hover { 
  background-color: red;
}

在codepend上发现了一个很好的hack，可以修改不透明度属性，但通过利用伪元素实现从一个渐变到另一个渐变。他所做的就是设置:after，这样当你改变实际元素的不透明度时，:after元素就会显示出来，看起来就像渐变一样。我觉得分享一下会有用。

原始代码来源:http://codepen.io/sashtown/pen/DfdHh

.button { display: inline-block; margin-top: 10%; padding: 1em 2em; font-size: 2em; color: #fff; font-family: arial, sans-serif; text-decoration: none; border-radius: 0.3em; position: relative; background-color: #ccc; background-image: linear-gradient(to top, #6d8aa0, #8ba2b4); -webkit-backface-visibility: hidden; z-index: 1; } .button:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3em; background-image: linear-gradient(to top, #ca5f5e, #d68584); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } .button:hover:after { opacity: 1; } .button span { position: relative; z-index: 3; } body { text-align: center; background: #ddd; } <a class="button" href="#"><span>BUTTON</span></a>

渐变过渡的部分解决方法是使用嵌入框阴影——你可以转换框阴影本身，也可以转换背景颜色——例如，如果你创建的嵌入框阴影与背景颜色相同，然后在背景颜色上使用过渡，它会产生一种错觉，即普通背景正在变为径向渐变

.button SPAN {
    padding: 10px 30px; 
    border: 1px solid ##009CC5;

    -moz-box-shadow: inset 0 0 20px 1px #00a7d1;
    -webkit-box-shadow: inset 0 0 20px 1px#00a7d1;
    box-shadow: inset 0 0 20px 1px #00a7d1; 

    background-color: #00a7d1;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.button SPAN:hover {
    background-color: #00c5f7; 
}

渐变还不支持过渡(尽管目前的规范说它们应该通过插值支持类似渐变到类似渐变的过渡)。

如果你想要一个背景渐变的渐隐效果，你必须在容器元素上设置一个不透明度，然后“过渡”不透明度。

(已经有一些浏览器版本支持渐变过渡(例如IE10。我在2016年在IE中测试了梯度转换，当时它们似乎可以工作，但我的测试代码不再工作了。)

更新:2018年10月 带有无前缀新语法的渐变过渡[例如径向渐变(…)]现在确认在Microsoft Edge 17.17134上工作(再次?)我不知道这是什么时候加入的。在最新的Firefox和Chrome / Windows 10上仍然不能工作。

更新:2021年12月 在最近的基于Chromium的浏览器中，使用@property的变通方法可以实现这一点(但在Firefox中不起作用)。请在YMMV上方看到@mahozad的回答(并点赞)。

我在工作中使用这个:)IE6+ https://gist.github.com/GrzegorzPerko/7183390

如果使用文本元素，不要忘记<element class="ahover"><span>Text</span></a>。

.ahover {
    display: block;
    /** text-indent: -999em; ** if u use only only img **/
    position: relative;
}
.ahover:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 1;
}
.ahover:hover:after {
    opacity: 1;
}
.ahover span {
    display: block;
    position: relative;
    z-index: 2;
}