如何为带径向渐变的票券式卡片添加线性渐变背景？

预期效果 #

图片后方的绿色背景为渐变效果：

实际效果 #

背景仅支持单一纯色，无法实现渐变：

需求说明 #

想要实现的渐变样式为 linear-gradient(300deg, #6DBF67 1.06%, #A8DAA4 100%)，需保留当前用径向渐变实现的票券侧边镂空效果，以及阴影滤镜。

当前代码 #

CSS 代码 #

.App {
  font-family: sans-serif;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
}

.section-left {
  width: 100%;
  height: 100%;
  max-width: 64px;
  max-height: 53px !important;
  min-height: 53px !important;
  background: radial-gradient(8px at left, #0000 98%, #6dbf67) left;
  background-size: 100% 64px;
  background-position: top -70px left;
  background-repeat: repeat-y;
  filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
  border-radius: 8px 0 0 8px;
  /* padding: 10px 16px; */
}

.wrapper-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 100%;
  background: white;
  text-align: center;
  /* vertical-align: middle; */
  background-color: white;
  /* padding: 5px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.section-right {
  width: 100%;
  height: 100%;
  max-height: 53px;
  background: radial-gradient(8px at right, #0000 98%, #fff) right;
  background-size: 100% 55px;
  background-position: top -1px right;
  background-repeat: repeat-y;
  filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.1));
  // box-shadow: 3px 3px 5px -1px rgba(0, 0,0,0.12);
  border-radius: 0 8px 8px 0;
  padding: 16px 12px;
}

.title {
  margin: 0;
}

HTML 代码 #

<div className="container">
  <div className="flex">
    <div className="section-left">
      <div className="wrapper-img">
        <img src="https://d3hi9gzi0oybee.cloudfront.net/assets/e-commerce/icons/ic-otten-point.svg" width="21px" height="21px" />
      </div>
    </div>
    <div className="section-right">
      <div className="flex-sb">
        <h4 className="title">Title</h4>
      </div>
    </div>
  </div>
</div>

解决方案 #

通过多层背景叠加即可实现：将线性渐变作为底层背景，径向渐变作为上层背景，利用径向渐变的透明部分透出底层的线性渐变，同时保留原有阴影和侧边效果。

修改后的 .section-left CSS 代码如下：

.section-left {
  width: 100%;
  height: 100%;
  max-width: 64px;
  max-height: 53px !important;
  min-height: 53px !important;
  /* 叠加线性渐变与径向渐变背景，上层径向渐变透出下层渐变 */
  background: 
    radial-gradient(8px at left, #0000 98%, #000) left,
    linear-gradient(300deg, #6DBF67 1.06%, #A8DAA4 100%);
  background-size: 100% 64px, 100% 100%;
  background-position: top -70px left, center;
  background-repeat: repeat-y, no-repeat;
  filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
  border-radius: 8px 0 0 8px;
  position: relative; /* 为内部绝对定位元素提供参考 */
}

关键调整说明： #

1. 背景叠加逻辑：用逗号分隔多个背景，上层径向渐变的透明镂空区域会自动透出下层的线性渐变，同时保持侧边的票券效果。
2. 背景参数适配：给线性渐变设置100% 100%的尺寸和居中定位，确保它铺满整个左侧区域；径向渐变保留原有配置维持侧边镂空。
3. 定位优化：添加position: relative，让内部头像容器的绝对定位更准确。

这样就能同时满足保留票券侧边效果、阴影滤镜，以及实现指定线性渐变背景的需求。

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