CSS渐变使用color-hint时混合效果异常问题求助

你遇到的是Edge Chromium对CSS线性渐变中**color-hint（颜色提示点）**的方向计算bug——当渐变方向反转时，浏览器对起始色到提示点的过渡计算逻辑出现偏差，导致视觉效果不对称。

修复方案一：手动定义中点色标（最稳妥） #

放弃使用color-hint的简写方式，直接计算出中点位置的颜色并添加明确色标。这种方式让过渡逻辑完全可控，不受浏览器bug影响。

比如你的例子中，75%位置（从左）的混合色是blue和orange的中间过渡色，直接写入代码：

/* 从左到右 */
background-image: linear-gradient(to right, blue, rgb(128, 64, 255) 75%, orange);
/* 从右到左 */
background-image: linear-gradient(to left, orange, rgb(128, 64, 255) 25%, blue);

注：rgb(128,64,255)是blue和orange的近似中间色，你可以用在线工具计算更精准的混合值

修复方案二：用transform翻转元素替代反转渐变方向 #

如果不想手动计算颜色，可以保持其中一个渐变的写法，通过transform: scaleX(-1)翻转元素实现反向效果，这样渐变的计算逻辑完全一致，不会出现偏差。

示例代码：

<div class="gradient-right"></div>
<div class="gradient-left"></div>

.gradient-right {
  background-image: linear-gradient(to right, blue, 75%, orange);
}
.gradient-left {
  background-image: linear-gradient(to right, blue, 75%, orange);
  transform: scaleX(-1);
}

这种方法无需修改渐变代码，直接通过元素翻转实现反向视觉效果，彻底规避浏览器的color-hint方向计算bug。

问题根源 #

按照CSS规范，linear-gradient(to right, blue, 75%, orange)的逻辑是：0%到75%区间，颜色从blue过渡到blue与orange的混合中点，再从75%到100%过渡到orange。但Edge Chromium处理反向渐变时，错误调整了起始色到提示点的过渡曲线，导致前半段过渡几乎停滞，后半段快速变化。只有当提示点在50%时过渡对称，才不会出现问题。

内容的提问来源于stack exchange，提问作者Ben Randall