如何用CSS实现带渐变与浮雕效果的文本

你需要实现带有指定渐变色彩+浮雕质感的文本效果，结合你提供的渐变参数和Figma的阴影参考，下面是优化后的实现方案：

优化后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Text with Emboss Effect</title>
    <style>
        .gradient-text {
            font-size: 100px;
            font-weight: bold;
            /* 精确还原指定的渐变断点 */
            background: linear-gradient(135deg, #3e296a 0%, #6d37ac 33%, #6d37ac 72%, #10dbac 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            /* 调整阴影层次，强化浮雕凹凸感 */
            text-shadow: 
                1px 1px 2px rgba(0, 0, 0, 0.4), /* 右下深色阴影模拟凹陷 */
                -1px -1px 2px rgba(255, 255, 255, 0.5); /* 左上浅色阴影模拟凸起 */
            position: relative;
        }

        /* 模拟内阴影效果，贴近Figma设计参考 */
        .gradient-text::after {
            content: "Decor";
            position: absolute;
            top: 0;
            left: 0;
            background: inherit;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: blur(2px);
            opacity: 0.3;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="gradient-text">Decor</div>
</body>
</html>

关键优化说明 #

• 精确还原渐变：严格按照你提供的0%、33%、72%、100%断点设置渐变，保证色彩过渡和目标效果一致
• 强化浮雕质感：调整text-shadow的阴影方向与透明度，左上浅色阴影模拟凸起高光，右下深色阴影模拟凹陷阴影，让浮雕的凹凸感更自然
• 模拟内阴影：通过伪元素生成相同的渐变文本，添加模糊效果后置于原文本下方，模拟Figma中的内阴影效果，增强文本层次感
• 兼容性优化：补充标准属性background-clip: text，提升多浏览器适配性

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