CSS 如何实现彩色渐变效果的文字

程序猿小野

于 2024-07-30 17:45:14 发布

阅读量34

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_42289279/article/details/140775562

版权

效果图如下：实现文字的字体颜色由 #ad4bd7 向 #6351fe 的颜色渐变效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>css如何实现颜色渐变的字体</title>
        <style>
            .gradient-text {
                color: transparent;
                display: inline-block;
                position: relative;
                white-space: nowrap;
                font-size: 20px;
                font-weight: 600;
            }

            .gradient-text::before {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, #ad4bd7, #6351fe);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        </style>
    </head>
    <body>
        <p class="gradient-text" data-text="程序猿小野">程序猿小野</p>
    </body>
</html>