如何创建 CSS 文本渐变

Posted on by

渐变文本在网络上变得越来越流行。我们甚至在不同地方的 code8cn上使用它。过去，渐变文本需要静态图像，但现在可以使用 CSS 而不是 Photoshop 轻松完成。

Web3 文本渐变样式#

在本快速指南中，我们将创建一些不同的文本渐变。这些文本渐变在 Web3 设计中非常常见。以下是一些示例，添加了发光以使它们看起来更具未来感：

Web3 Style Gradient

Crypto Text

Ethereum

A New Startup on the Blockchain

CSS 文本渐变是如何工作的？#

您可能会惊讶地发现 CSS 渐变文本实际上是通过一组未标准化的 webkit CSS 属性完成的。这些属性在网络上变得如此普遍，甚至 Firefox 现在也支持它们。

由于大多数其他浏览器主要基于 Chromium，因此渐变文本在所有现代 Web 浏览器中对一组非标准化属性都有非常广泛的支持。担心旧版浏览器？由于这些是 webkit 属性，旧浏览器会忽略它们，因此您无需担心支持。

这意味着那些可以看到渐变文本的人，做，而那些不能，只看到正常的文本颜色。简单的！

添加渐变文本#

要添加渐变文本，我们需要添加以下 CSS：

        .text {       
            background-image: linear-gradient(225deg, #28d8ff, #032eff);
            filter: drop-shadow(0 20px 30px #28d8ff33);
            color: black;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-box-decoration-break: clone;
        }

让我们分解一下：

  • background-image – 是我们要用于文本的渐变
  • -webkit-text-fill-color – 用透明颜色替换字体的正常颜色，这样文本就消失了！
  • -webkit-background-clip – 将背景图像剪辑到文本的轮廓。现在背景将只显示文本的位置。
  • -webkit-box-decoration-break – 是我在 CSS 中见过的最奇怪的属性，但它确保渐变可以在多行上工作。
  • filter – 因为我们使用背景剪辑和文本，所以我们可以对投影使用过滤器而不是普通的盒子阴影。

现在由你决定你想要什么渐变！只需调整背景图像颜色以显示您想要的渐变样式。您可以在此处找到此演示的完整代码。

完整代码

body {
  background: rgb(15 19 22);
  padding: 2rem;
  font-family: Inter, sans-serif;
}
.link {
  font-size: 1.5rem;
  opacity: 0.5;
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
}
.link:hover {
  opacity: 1;
}
    .text {
        background-image: linear-gradient(60deg, #8500ff, #ff8100);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        font-weight: 700;
        float: left;
        -webkit-box-decoration-break: clone;
        overflow: visible;
    }
    p.text {
        font-size: 2.5rem !important;
        line-height: 3rem;
        margin-top: 0;
    }
    h2.text {
        font-weight: 600 !important;
    }
    h2.text a {
        border-bottom: none !important;
    }
    p.text.orange {
        background-image: linear-gradient(60deg, #fffb00, #ff6124) !important;
        float: left;
    }
    p.text.blue {
        background-image: linear-gradient(225deg, #28d8ff, #032eff) !important;
        filter: drop-shadow(0 20px 30px #28d8ff33);
    }

    p.text.green {
        background-image: linear-gradient(225deg, #7cff28, #007eff) !important;
        filter: drop-shadow(0 20px 30px #7cff283d);
    }
    p.text.red {
        background-image: linear-gradient(225deg, #ff2828, #032eff) !important;
        filter: drop-shadow(0 20px 30px #284eff2e);
    }
<a href="https://www.code8cn.com/css-text-gradients.html" class="link">Original Article</a>
<div style="float:left;width:100%;"><p class="text">Web3 Style Gradient</p></div>
<div style="float:left;width:100%;"><p class="text blue">Crypto Text</p></div>
<div style="float:left;width:100%;"><p class="text green">Ethereum</p></div>
<div style="float:left;width:100%;"><p class="text red">A New Startup on the Blockchain</p></div>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

快乐的文字渐变！

推荐阅读：