如何在CSS中复现Figma里带渐变背景与内阴影的文字效果？

问题背景 #

需要复现Figma中文字"250"的效果，包含：

• 内阴影：-4px 4px 8px rgba(0,0,0,0.4)
• 外阴影：-1px 1px 2px rgba(255,255,255,0.8)
• 文字渐变：从#212423到#0D0D0D

原代码仅实现了渐变文字+外阴影，无法同时添加内阴影——核心原因是-webkit-background-clip: text会让文字本身透明，而CSS本身不支持text-shadow: inset属性，常规内阴影方案无法生效。

解决方案：伪元素叠加模拟 #

通过伪元素生成一层带内阴影的文字，放在渐变文字的下层，模拟出视觉上的内阴影效果：

<h1 class="text-3D" data-text="250">250</h1>

.text-3D {
    position: relative;
    font-size: 200px;
    font-weight: 900;
    line-height: 80%;
    /* 渐变文字 + 外阴影 */
    background: linear-gradient(to top, #0D0D0D 0%, #212423 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(-1px 1px 2px rgba(255,255,255,0.8));
}

/* 伪元素实现内阴影 */
.text-3D::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    /* 仅显示内阴影 */
    text-shadow: -4px 4px 8px rgba(0,0,0,0.4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 置于主文字下方 */
    z-index: -1;
}

原理说明 #

1. 主元素负责显示渐变文字和外阴影：通过-webkit-background-clip: text实现文字渐变效果，filter: drop-shadow添加外阴影。
2. 伪元素生成与主元素完全相同的文字，仅设置内阴影样式，同时让文字本身透明，通过z-index: -1将其放在主文字下方，模拟出文字内阴影的视觉效果。
3. 使用data-text属性确保伪元素文字与主元素内容一致，避免后续修改时重复调整。

如果出现阴影与文字对齐偏差，可微调伪元素的top/left值（比如top: 1px; left: -1px;）来匹配视觉效果。

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