如何实现带径向透明渐变的左右线性CSS渐变，使两端渐隐？

完全可行，你可以通过CSS的遮罩（mask）属性或者多层背景叠加来实现这个效果，下面是两种简洁的方案：

方案一：使用CSS Mask（推荐） #

通过遮罩层控制线性渐变的可见范围，让两端逐渐透明：

div {
  height: 3em;
  /* 保留你的原线性渐变 */
  background: linear-gradient(90deg, rgba(5, 75, 135, 1) 24%, rgba(166, 40, 46, 1) 69%);
  /* 左右对称的径向渐变遮罩，中间不透明，两端逐渐透明 */
  -webkit-mask: 
    radial-gradient(farthest-side at left, transparent, black 70%),
    radial-gradient(farthest-side at right, transparent, black 70%);
  mask: 
    radial-gradient(farthest-side at left, transparent, black 70%),
    radial-gradient(farthest-side at right, transparent, black 70%);
  /* 合并两个遮罩层 */
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

<div></div>

原理说明 #

• mask属性用径向渐变创建了两个遮罩：左侧从透明过渡到黑色，右侧同理；
• 遮罩的黑色区域会显示下方的线性渐变，透明区域则隐藏渐变，从而实现两端淡出的效果；
• 调整70%这个数值可以控制淡出的范围：数值越小，淡出的区域越宽；数值越大，淡出越窄。

方案二：多层背景叠加 #

如果需要兼容不支持mask的旧浏览器，可以用多层背景叠加实现：

div {
  height: 3em;
  background: 
    /* 左右径向渐变，用半透明黑色叠加在线性渐变上实现淡出 */
    radial-gradient(farthest-side at left, transparent, rgba(0,0,0,0.9) 70%),
    radial-gradient(farthest-side at right, transparent, rgba(0,0,0,0.9) 70%),
    /* 原线性渐变 */
    linear-gradient(90deg, rgba(5, 75, 135, 1) 24%, rgba(166, 40, 46, 1) 69%);
  /* 混合模式让叠加效果更自然 */
  background-blend-mode: multiply;
}

<div></div>

原理说明 #

• 上层的两个径向渐变从透明过渡到半透明黑色，叠加在线性渐变上；
• background-blend-mode: multiply让颜色混合更自然，避免出现突兀的边界；
• 同样可以调整70%和rgba(0,0,0,0.9)的透明度来控制淡出效果。

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