CSS/HTML实现文字发光后如何去除黑色背景框

我尝试用CSS实现文字发光效果，已经成功让文字发光，但出现了无法去除的黑色背景框，严重影响效果。希望文字背景完全透明，请问该如何解决？

相关代码如下：

CSS代码 #

.heading-secondary {
  font-size: 2.8rem;
  font-weight: 100;
  position: absolute;
  top: 10%; /* 110%; */
  /* font-size: 72px;*/
  background-image: none;
  background: -webkit-linear-gradient(#007CF0, #00DFD8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 40px 20px #0ff;
}

HTML代码 #

<section class="second-page">
  <div class="our-news">
    <h1 class="heading-secondary">
      Why buy through us?
    </h1>
  </div>
</section>

问题说明：截图中渐变文字周围存在黑色矩形背景框，覆盖了整个标题元素区域，破坏了透明背景的需求。

解决方法 #

问题根源在于你使用了box-shadow属性——它是给整个元素的盒模型添加阴影，而非针对文字本身。结合你给文字设置的-webkit-text-fill-color: transparent，元素的空白背景区域加上过大的阴影扩散范围，就会出现你看到的黑色框。

正确做法是用text-shadow实现文字发光，替换掉box-shadow：

修改后的CSS代码：

.heading-secondary {
  font-size: 2.8rem;
  font-weight: 100;
  position: absolute;
  top: 10%;
  background: -webkit-linear-gradient(#007CF0, #00DFD8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 替换box-shadow为text-shadow */
  text-shadow: 0px 0px 40px #0ff;
}

如果需要更强烈的发光效果，可以叠加多层text-shadow：

text-shadow: 
  0 0 20px #0ff,
  0 0 40px #0ff,
  0 0 60px #0ff;

修改后，发光效果仅作用于文字，元素背景保持完全透明，黑色框的问题即可解决。

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