在CSS中，你可以使用linear-gradient()函数来实现从左到右的颜色渐变背景。以下是几种实现方式：

基本语法

.element {
  background: linear-gradient(to right, color1, color2);
}

示例代码

两种颜色渐变

.gradient-bg {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  /* 或者使用角度 */
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
}

多种颜色渐变

.multi-color {
  background: linear-gradient(to right, red, yellow, green, blue);
}

带有明确色标位置的渐变

.precise-gradient {
  background: linear-gradient(to right, 
    #ff0000 0%, 
    #ffff00 25%, 
    #00ff00 50%, 
    #0000ff 100%);
}

兼容性考虑

为了更好的浏览器兼容性，可以添加浏览器前缀：

.full-compatibility {
  background: -webkit-linear-gradient(left, #ff7e5f, #feb47b);
  background: -o-linear-gradient(right, #ff7e5f, #feb47b);
  background: -moz-linear-gradient(right, #ff7e5f, #feb47b);
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

实际应用示例

<div class="gradient-box"></div>
<style>
.gradient-box {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, 
    #1e5799 0%,
    #2989d8 50%,
    #207cca 51%,
    #7db9e8 100%);
}
</style>