使用 HTML 和 CSS 创建渐变文本效果

本文将展示使用 background-clip CSS 属性在文本上添加渐变效果的方法。使用此效果的最终文本输出如下所示。将使用的 CSS 属性是flexbox 、 background-clip和-webkit-background-clip以及背景。

HTML 部分：此部分包含 HTML 标记，该标记将包含必须设置样式的文本。文本已包含在容器 div 中，这是一种很好的做法，并有助于将其置于页面的中心。类渐变也已添加到文本中。本节不需要更复杂的东西。

HTML

  

    

  

    

        

            Happy Halloween
        
    

  

CSS 部分： CSS 部分将包含使用渐变效果的文本样式。一种名为Metal Mania 的google 字体用于为其提供所需的效果。我们将首先重置 CSS 中的所有内容，这是一个很好的做法。接下来将导入并使用要使用的 Google 字体。我们还将使用 flexbox 属性将所有内容居中。

CSS

创建渐变效果：我们将开始制作主要渐变效果。逻辑是为文本设置了线性渐变背景。然后背景被剪裁到文本的大小。剪切后，文本颜色设置为透明。

inline-block属性将使背景与标题文本的大小一致。带有文本值的background-clip属性将允许我们将线性渐变背景剪辑到文本。 -webkit前缀版本用于使其具有故障安全性。使文本颜色透明只会显示线性渐变背景。

CSS

完整代码：

HTML

  

    
  
    

  

    

        

            Happy Halloween
        
    

  

输出：