使用CSS径向渐变或滤镜模糊实现光斑时出现线条问题求助

我尝试用带白色圆形的div添加“光斑”效果，CSS代码如下：

.spot {
   background-color: #e0e2e411;
   border-radius: 9999px;
   filter: blur(80px);
   /* background-image: radial-gradient(circle, #ffffffff, #ffffffb9, #ffffff77, #ffffff3b, 
    #ffffff00, #ffffff00, #ffffff00); */
 }

但出现了破坏设计的分界线，完整示例代码如下：

完整示例代码 #

CSS

body{
  background-color: black;
  color:gray;
}

.spot {
  background-color: #ffffffff;
  filter: blur(220px);
  /* background-image: radial-gradient(circle, #ffffffff, #ffffffb9, #ffffff77, #ffffff3b, #ffffff00, #ffffff00, #ffffff00); */
}

.circle {
  height: 100%;
  width: 100%;
}

.container{
  position: relative;
  width: 200px;
  height: 200px;
}

.target{
  border: 1px gray solid;
  position: absolute;
  width: 40px;
  height: 40px;
  right: -80px;
  top: 40px;
}

HTML

<html>
<body>
  <h3>(you will need to look closer to see the lines)</h3>
  <div class="container relative">
    <div class="target"></div>
    <div class="circle spot"></div>
  </div>
</body>
</html>

我试过用svg > circle和radial-gradient，但都消不掉这些线条。这个圆形要占满整个屏幕，现在视觉效果很差，怎么解决？

可行的解决方法 #

1. 扩大模糊元素尺寸，避免边缘截断

模糊滤镜会在元素边缘产生硬截断，导致分界线。把.spot元素的尺寸放大，超出容器边界，确保模糊的渐变区域完全显示：

.spot {
  background-color: #ffffffff;
  filter: blur(220px);
  /* 尺寸扩大值为模糊半径的2倍，覆盖所有模糊区域 */
  width: calc(100% + 440px);
  height: calc(100% + 440px);
  /* 偏移元素使其居中 */
  margin: -220px 0 0 -220px;
}

原理：模糊半径是220px，元素需要向四周各延伸220px，才能让模糊的渐变部分不被容器边界裁切，自然消除线条。

2. 改用backdrop-filter实现背景模糊

如果光斑是叠加在背景上的效果，用backdrop-filter替代元素自身模糊，让模糊直接作用于下方背景，从根源避免元素边缘的截断问题：

.spot {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  backdrop-filter: blur(220px);
  background-color: #ffffff22; /* 半透明白色模拟光斑亮度 */
}

注意：backdrop-filter需要元素位于目标背景上方，且自身有一定透明度才能生效，现代浏览器均支持。

3. 确保正圆模糊，适配全屏场景

全屏时宽高不等，border-radius:9999px会生成椭圆，模糊时容易出现边缘问题。改用border-radius:50%配合视窗单位确保正圆，同时扩大尺寸：

.spot {
  background-color: #ffffffff;
  filter: blur(220px);
  /* 用vw确保宽高一致，生成正圆 */
  width: calc(100vw + 440px);
  height: calc(100vw + 440px);
  /* 水平垂直居中 */
  margin-left: -220px;
  margin-top: calc((100vh - 100vw)/2 - 220px);
  border-radius: 50%;
}

4. 优化径向渐变的过渡范围

如果坚持用radial-gradient，调整渐变的透明终点位置，同时让背景尺寸大于元素，避免边缘硬切：

.spot {
  background-image: radial-gradient(
    circle,
    #ffffffff,
    #ffffffb9,
    #ffffff77,
    #ffffff3b,
    transparent 70%,
    transparent
  );
  background-size: 150% 150%;
  background-position: center;
  filter: blur(20px); /* 轻微模糊优化过渡平滑度 */
}

让渐变的透明区域超出元素范围，过渡更自然，不会出现明显的线条。

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