求助：如何用conic-gradient实现水平CSS聚光灯及优化方案

核心实现思路 #

通过conic-gradient配合径向遮罩（mask）实现锥形聚光灯，利用mix-blend-mode: screen让灯光在深色背景上呈现亮光效果，同时通过filter: blur模拟自然光晕。所有效果共用基础样式，仅通过渐变定位、起始角度和遮罩位置区分方向。

完整代码实现 #

HTML结构

<html>
  <body>
    <div class="spotlight spotlight-center"></div>
    <div class="spotlight spotlight-left"></div>
    <div class="spotlight spotlight-right"></div>
  </body>
</html>

CSS样式

body {
  margin: 0;
  background-color: #000;
}

/* 公共聚光灯基础样式 */
.spotlight {
  position: absolute;
  inset: 0; /* 替代top/right/bottom/left: 0，简化定位 */
  z-index: -10;
  mix-blend-mode: screen; /* 让白色灯光在黑色背景上叠加显示 */
  filter: blur(12px); /* 模拟光晕模糊效果，可自行调整数值 */
}

/* 1. 垂直向下照射的聚光灯 */
.spotlight-center {
  background: conic-gradient(
    at 50% 0%, /* 光源定位在顶部中心 */
    transparent 44%, /* 透明区域，控制锥形宽度 */
    #fff 47% 53%, /* 白色灯光核心区域 */
    transparent 56% /* 透明区域，过渡到背景 */
  );
  background-repeat: no-repeat;
  /* 径向遮罩：让灯光从中心向外渐隐，模拟衰减 */
  -webkit-mask: radial-gradient(
    circle at top center, 
    #000 6%, 
    transparent 72%
  );
  mask: radial-gradient(
    circle at top center, 
    #000 6%, 
    transparent 72%
  );
}

/* 2. 从左侧指向顶部的聚光灯 */
.spotlight-left {
  background: conic-gradient(
    from 90deg, /* 调整渐变起始角度，让锥形指向顶部 */
    at 0% 50%, /* 光源定位在左侧中心 */
    transparent 44%,
    #fff 47% 53%,
    transparent 56%
  );
  background-repeat: no-repeat;
  -webkit-mask: radial-gradient(
    circle at left center, 
    #000 6%, 
    transparent 72%
  );
  mask: radial-gradient(
    circle at left center, 
    #000 6%, 
    transparent 72%
  );
}

/* 3. 从屏幕右侧指向顶部的聚光灯 */
.spotlight-right {
  background: conic-gradient(
    from -90deg, /* 等同于270deg，让锥形指向顶部 */
    at 100% 50%, /* 光源定位在右侧中心 */
    transparent 44%,
    #fff 47% 53%,
    transparent 56%
  );
  background-repeat: no-repeat;
  -webkit-mask: radial-gradient(
    circle at right center, 
    #000 6%, 
    transparent 72%
  );
  mask: radial-gradient(
    circle at right center, 
    #000 6%, 
    transparent 72%
  );
}

关键优化点 #

1. 简化定位：用inset: 0替代手动设置top/right/bottom/left，代码更简洁。
2. 去掉冗余变换：直接通过conic-gradient的from参数和定位点控制灯光方向，无需额外rotate或transform。
3. 统一遮罩逻辑：针对不同方向的聚光灯，仅调整径向遮罩的中心点即可实现自然衰减。

推荐CSS辅助工具 #

• CSS渐变生成器：可视化调整conic-gradient的角度、颜色范围，实时预览效果并生成代码。
• 模糊效果调试工具：实时调整filter: blur的数值，直观查看光晕的柔和度。
• 遮罩编辑器：帮助快速设计径向遮罩的渐变范围，模拟灯光的衰减效果。

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