如何为CSS ::after伪元素设置screen混合模式实现PS外发光效果？

问题场景 #

需要在带图片背景的大尺寸文字上添加浅色外发光，Photoshop中该效果通过Screen混合模式实现。由于text-shadow在大扩散范围下会出现块状失真，尝试用h1::after伪元素创建模糊背景模拟发光，但设置mix-blend-mode: screen后未生效。

原代码 #

CSS

.container {
  padding: 35pt;
  text-align: center;
  background: url("../images/background.jpg") no-repeat;
  background-size: cover;
  background-position-y: -2pt;
  position: relative;
}

.container h1 {
  text-align: center;
  font-size: 26pt;
  font-weight: 700;
  margin: 0pt auto -10pt auto;
  padding: 10pt 30pt;
  z-index: 100;
  display: inline-block;
}

.container h1::after {
  mix-blend-mode: overlay;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(
      circle at center,
      rgba(224,235,245,0.9) 20%,
      rgba(224,235,245,0.8) 90%
  );
  border-radius: 50px;
  filter: blur(15px);
  z-index: -1;
}

HTML

<div class="container">
  <h1>Hello World! This is a long text.</h1>
</div>

问题原因 #

原伪元素是覆盖整个容器的径向渐变，仅与父元素h1的透明背景混合，无法与下方的容器背景图产生交互，因此mix-blend-mode未生效；同时伪元素未跟随文字定位，无法模拟文字外发光的贴合效果。

解决方案 #

调整伪元素为文字副本，让其与容器背景图混合，同时设置正确的定位和混合模式：

修改后的代码

CSS

.container {
  padding: 35pt;
  text-align: center;
  background: url("../images/background.jpg") no-repeat;
  background-size: cover;
  background-position-y: -2pt;
}

.container h1 {
  text-align: center;
  font-size: 26pt;
  font-weight: 700;
  margin: 0pt auto -10pt auto;
  padding: 10pt 30pt;
  z-index: 100;
  display: inline-block;
  position: relative; /* 让伪元素相对于文字定位 */
  color: #222; /* 文字基础颜色，按需调整 */
}

.container h1::after {
  mix-blend-mode: screen; /* 匹配PS的Screen混合模式 */
  content: attr(text); /* 复用h1的文字内容 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(224,235,245,0.9); /* 发光的浅色 */
  filter: blur(15px); /* 模糊程度，对应PS的发光大小 */
  z-index: -1;
  transform: scale(1.1); /* 可选，扩大发光扩散范围 */
}

HTML

<div class="container">
  <h1 text="Hello World! This is a long text.">Hello World! This is a long text.</h1>
</div>

关键调整说明 #

1. 给h1添加position: relative，确保伪元素跟随文字定位。
2. 伪元素用content: attr(text)复用文字内容，让发光效果完全贴合文字轮廓。
3. 设置mix-blend-mode: screen，让伪元素的浅色发光与下方背景图混合，还原PS的外发光效果。
4. 可选transform: scale(1.1)增大发光的扩散范围，对应PS中外发光的“扩展”参数。

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