如何实现文字背后舞台灯光效果及底部边框？优先纯CSS实现

嘿，刚好有过类似的实现经验，纯CSS就能完美搞定你要的效果，完全不用JavaScript！直接上代码和细节解释，你可以直接套用修改～

实现思路 #

1. 舞台灯光效果：利用伪元素::before创建渐变层，通过模糊滤镜、定位和旋转模拟向上投射的灯光，同时用容器的overflow:hidden控制灯光显示范围
2. 底部边框效果：用背景渐变实现带色彩过渡的底部边框，比原生border-bottom更灵活好看

完整代码示例 #

HTML结构

<div class="stage-text">舞台灯光效果文字</div>

CSS样式

.stage-text {
  /* 基础文字样式，可按需调整 */
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  /* 关键：相对定位，让伪元素基于当前容器定位 */
  position: relative;
  /* 上下内边距，给灯光和边框留出显示空间 */
  padding: 1.5rem 0 2.5rem;
  /* 隐藏容器外溢出的灯光渐变 */
  overflow: hidden;
  /* 底部渐变边框：从金色到珊瑚粉再回到金色 */
  background-image: linear-gradient(to right, #ffd700, #ff6b6b, #ffd700);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.stage-text::before {
  content: "";
  /* 绝对定位，将灯光层放在文字后方 */
  position: absolute;
  top: 0;
  left: 50%;
  /* 放大尺寸，确保灯光覆盖整个文字区域并向上延伸 */
  width: 130%;
  height: 160%;
  /* 核心灯光渐变：从透明过渡到亮色再回到透明，模拟投射效果 */
  background: linear-gradient(to top, rgba(255, 215, 0, 0) 0%, rgba(255, 215, 0, 0.7) 45%, rgba(255, 215, 0, 0) 100%);
  /* 模糊滤镜，让灯光边缘更柔和自然 */
  filter: blur(22px);
  /* 居中灯光并轻微旋转，模拟斜向投射的舞台灯效果 */
  transform: translate(-50%, -25%) rotate(-6deg);
  /* 将灯光层置于文字下方 */
  z-index: -1;
  /* 调整透明度，控制灯光的强弱 */
  opacity: 0.8;
}

自定义调整技巧 #

• 灯光颜色：修改linear-gradient中的rgba颜色值即可，比如换成蓝色系rgba(30, 144, 255, 0.7)
• 灯光方向：调整transform: rotate()的角度，正数是顺时针旋转，负数是逆时针
• 灯光强度：修改filter: blur()的数值（越大越模糊）或opacity的数值（越大越亮）
• 底部边框：调整background-image的渐变颜色、background-size的高度值（第二个数值）来改变边框粗细

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