如何用CSS伪类为组件单侧添加匹配Figma设计的背景渐变

你之前的linear-gradient写法重复设置相同颜色的断点，逻辑混乱，导致渐变效果和设计不符。要实现组件单侧的渐变背景，用伪元素（::before/::after）是最灵活的方案，既能单独控制渐变层，又不影响组件原有样式。

示例：给组件右侧添加渐变 #

假设你的组件类名为.target-component，代码如下：

.target-component {
  position: relative;
  background-color: #0f65a5; /* 组件主体背景色 */
  overflow: hidden; /* 避免伪元素溢出组件 */
}

.target-component::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20%; /* 渐变区域的宽度，根据设计需求调整 */
  height: 100%;
  /* 从右往左，从半透明白色过渡到主体色 */
  background: linear-gradient(to left, rgba(255, 255, 255, 0.5), #0f65a5);
}

如果需要左侧渐变，调整伪元素定位和渐变方向： #

.target-component::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #0f65a5);
}

为什么之前的写法不行？ #

你原代码里重复设置#0f65a5 80%、#0f65a5 50%这类无效断点，渐变的颜色过渡逻辑完全错误，自然无法呈现单侧渐变的效果。用伪元素单独承载渐变层，能精准控制渐变的位置、宽度和过渡方向，完美匹配Figma的设计效果。

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