css 文字上下渐变

要在文字上下添加渐变效果，你可以使用 CSS 的背景渐变（`background-image`）属性来实现。下面是一个示例代码：

.gradient-text {
  background-image: linear-gradient(to bottom, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在上面的代码中，`.gradient-text` 是应用渐变效果的元素的类名。`linear-gradient` 函数用于创建线性渐变效果，`to bottom` 表示从上到下渐变。`#ff00ff` 和 `#00ffff` 是渐变的起始和结束颜色。

为了使渐变应用到文字上，我们使用 `-webkit-background-clip: text;` 属性将背景裁剪到文字的边界，并使用 `-webkit-text-fill-color: transparent;` 属性将文字颜色设置为透明，以便显示背景渐变。

你可以将 `.gradient-text` 类应用于你想要添加渐变效果的元素，比如一个 `<h1>` 标题：

<h1 class="gradient-text">Hello, CSS Gradient Text</h1>

这样，标题中的文字就会呈现出上下渐变的效果。记得根据你的具体需求调整颜色和元素选择器！