css文字渐变色效果

文字渐变色效果

在 CSS 中，我们可以通过 background-image 来设置背景渐变颜色，然后将文字设置为透明，并使用 background-clip: text 属性让背景颜色或渐变效果只显示在文字的实际字符上，而不是填充整个文字区域。

<style>
    .div_demo_wrap {
        /* background-color: #D6E3FB; */
        text-align: center;
        padding: 20px 0;
        margin: 20px 0;
        font-size: 40px;
    }
    /** 普通渐变效果 */
    .div_demo {
        color: transparent;
        background-clip: text;
        background-image: linear-gradient(to right, #ffecd2, #ffecd2, #fcb69f, #94e1b6, #72c2f8, #94bfff, #d083ec, #d083ec);
    }
    /** 条纹效果 */
    .div_demo2 {
        color: transparent;
        background-clip: text;
        background-image: repeating-linear-gradient(-57deg, #B3E5FC, #B3E5FC 3px, #87CEFA 3px, #87CEFA 6px);
    }
</style>

<div class="div_demo_wrap">
    <div class="div_demo">文字渐变色效果演示, 下附说明</div>
    <div class="div_demo2">文字条纹效果演示</div>
</div>

** 注意事项**
这里通过重复#d083ec两次，使紫色#d083ec在渐变中占据了更大的比例，从而使得紫色更加明显。这种方法适用于任何颜色，如果您发现某个颜色在渐变中不够明显，可以通过增加该颜色的出现次数来增强其视觉效果。这种方法可能会影响渐变的平滑度，因为重复的颜色可能会导致渐变在该点出现“跳跃”。为了保持渐变的平滑过渡，您可能需要调整颜色的过渡点或者使用更精细的颜色梯度。