如何实现带完整背景背板的霓虹锐利切割文字效果

• 现有实现效果：
• 目标实现效果：

现有代码仅生成了文字外层的细霓虹描边，无法生成完整包裹文字的切割背板，核心问题是SVG滤镜的膨胀参数不足，缺少背板偏移、分层合并的逻辑。

实现代码 #

CSS 代码 #

.wrapper {
  background-color: #000;
  padding: 2rem;
}
.previewText {
    position: relative;
    --text-color: #30cbfd;
    color: var(--text-color);
    text-shadow: var(--text-color) 0px 0px 10px, var(--text-color) 0px 0px 25px, #000 1px 1px 1px;
    font-size: 50px;
    line-height: 1.2;
}
.previewText .text-content {
    position: relative;
    z-index: 2;
}
.previewText svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

HTML 代码 #

<div class="wrapper">
  <div class="previewText cut-sharp">
    <svg>
      <filter id="cutSharpBackboard" x="-50%" y="-50%" width="200%" height="200%">
        <!-- 生成大幅膨胀的背板基底 -->
        <feMorphology in="SourceGraphic" result="boardDilate" operator="dilate" radius="12"></feMorphology>
        <!-- 背板偏移实现硬边切割错位感 -->
        <feOffset in="boardDilate" dx="6" dy="8" result="boardOffset"></feOffset>
        <!-- 填充背板颜色 -->
        <feFlood flood-color="#ffffff" flood-opacity="0.15" result="boardFill"></feFlood>
        <feComposite in="boardFill" in2="boardOffset" operator="in" result="backboard"></feComposite>
        <!-- 生成外层霓虹细描边 -->
        <feMorphology in="SourceGraphic" result="strokeDilate" operator="dilate" radius="2.5"></feMorphology>
        <feFlood flood-color="#ffffff" flood-opacity="0.6" result="strokeFill"></feFlood>
        <feComposite in="strokeFill" in2="strokeDilate" operator="in" result="neonStroke"></feComposite>
        <!-- 按层级合并：最底层背板 → 中间霓虹描边 → 最上层原文字 -->
        <feMerge>
          <feMergeNode in="backboard"></feMergeNode>
          <feMergeNode in="neonStroke"></feMergeNode>
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>
    </svg>
    <div class="text-content" style="font-family: Amarila; filter: url(#cutSharpBackboard);">
      <p>work <span style="font-family: PoiretOne;">HARD</span></p>
      <p><span style="font-family: PoiretOne;">dream</span> big</p>
    </div>
  </div>
</div>

参数调整说明 #

• 背板尺寸：修改第一层feMorphology的radius属性，数值越大背板覆盖范围越宽
• 切割错位效果：修改feOffset的dx（水平偏移）、dy（垂直偏移）属性，控制背板相对文字的偏移方向和距离
• 背板透明度：修改第一层feFlood的flood-opacity属性，取值范围0-1，数值越高背板颜色越深
• 霓虹描边粗细：修改第二层feMorphology的radius属性，控制文字边缘亮边的宽度
• 霓虹发光强度：调整.previewText的text-shadow模糊半径参数即可

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